Javascript 移动网站中带有图像和文本的按钮的最佳实践

参考下面的屏幕截图，我创建了一个

div

来包装另外两个

div

图像和文本，然后我使用CSS

position:absolute

将这些

div

合并在一起

然而，我发现在移动设备上测试时按钮并不敏感，有时我需要几次触摸按钮才能生效

那么，我的代码是否有问题？创建带有图像和文本的按钮的最佳实践是什么

谢谢

<div class="r">
    <div class="a">
        <div class="i"><img src="store_btn_on.png" /></div>
        <div class="t">Shatin</div>
    </div>
    <div class="b">
        <div class="i"><img src="store_btn_off.png" /></div>
        <div class="t">Causeway Bay</div>
    </div>
    <div class="c">
        <div class="i"><img src="store_btn_off.png" /></div>
        <div class="t">Kowloon Bay</div>                            
    </div>
</div>

沙田
铜锣湾
九龙湾

javascript部分的更新

addButtonListener($("#store > .r > .a"), function(event, target){
        $("#some_content").css("display", "none");
        $("#other_content").css("display", "block");
        $(".r > .b > .a > img").attr("src" , "store_btn_on.png");
        $(".r > .b > .b > img, .r > .b > .c > img").attr("src" , "store_btn_off.png");
});

function addButtonListener(targets, job){
    if ("ontouchstart" in document.documentElement){
        targets.each(function(){
            $(this)[0].addEventListener('touchstart', function(event){
                event.preventDefault();
                $(this).attr({ "x": event.targetTouches[0].clientX, "diffX": 0, "y": event.targetTouches[0].clientY, "diffY": 0 });
                $(this).addClass("on");
            }, false);
            $(this)[0].addEventListener('touchmove', function(event){
                $(this).attr({
                    "diffX": Math.abs(event.targetTouches[0].clientX - $(this).attr("x")),
                    "diffY": Math.abs(event.targetTouches[0].clientY - $(this).attr("y"))
                });
            }, false);
            $(this)[0].addEventListener("touchend", function(event){
                $(this).removeClass("on");
                if ($(this).attr("diffX") < 5 && $(this).attr("diffY") < 5){ $(job(event, $(this))); }
            }, false);
        });
    }
    else {
        targets.each(function(){
            $(this).mousedown(function(event){ event.preventDefault(); $(this).addClass("on"); });
            $(this).mouseup(function(event){ event.preventDefault(); if ($(this).hasClass("on")){ $(job(event, $(this))); } $(this).removeClass("on"); });
            $(this).hover(function(event){ $(this).removeClass("on"); });
        });
    }
}

addButtonListener（$（“#store>.r>.a”），函数（事件，目标）{
$（“某些内容”）.css（“显示”、“无”）；
$（“其他内容”）.css（“显示”、“块”）；
$（“.r>.b>.a>img”）.attr（“src”，“store\u btn\u on.png”）；
$（“.r>.b>.b>img，.r>.b>.c>img”）.attr（“src”，“store\u btn\u off.png”）；
});
函数addButtonListener（目标、作业）{
if（document.documentElement中的“ontouchstart”）{
目标。每个（函数（）{
$（此[0]。addEventListener（'touchstart'，函数（事件）{
event.preventDefault（）；
$（this.attr（{“x”：event.targetTouches[0]。clientX，“diffX”：0，“y”：event.targetTouches[0]。clientY，“diffY”：0}）；
$（此）.addClass（“on”）；
}，假）；
$（此[0]。addEventListener（'touchmove'，函数（事件）{
$（this.attr）({
“diffX”：Math.abs（event.targetTouches[0].clientX-$（this.attr（“x”）），
“diffY”：Math.abs（event.targetTouches[0].clientY-$（this.attr（“y”））
});
}，假）；
$（此[0]。addEventListener（“touchend”），函数（事件）{
$（this.removeClass（“on”）；
if（$（this.attr（“diffX”）<5&&$（this.attr（“diffY”）<5）{$（作业（事件，$（this））；}
}，假）；
});
}
否则{
目标。每个（函数（）{
$（this.mousedown（函数（事件）{event.preventDefault（）；$（this.addClass（“on”）；}）；
$（this）.mouseup（function（event）{event.preventDefault（）；if（$（this）.hasClass（“on”）{$（job（event，$（this））；}$（this.removeClass（“on”）；}）；
$（this.hover（函数（事件）{$（this.removeClass（“on”）；}）；
});
}
}

我不确定移动设备上按钮的灵敏度（您没有显示任何处理点击事件的代码），但我认为最好这样编写HTML：

<div class="r">
    <div class="button on">
        <span>Shatin</span>
    </div>
    <div class="button">
        <span>Bay</span>
    </div>
    <div class="button">
        <span>Bay</span>                           
    </div>
</div>

这使得只需添加或删除on类就可以轻松地动态打开或关闭按钮

虽然不是必需的，但您可能也对查看CSS3渐变感兴趣，以创建简单的渐变背景图像，然后在没有任何渐变支持的浏览器中很好地降级为图像

---

类名“r”和“b”不是很具有描述性。除非一些HTML/CSS小型化程序将这些代码放入您的开发代码中，否则我将考虑给您的类更具描述性的名称。

< P>我不确定您的按钮在移动设备上的灵敏度（您没有显示任何用于处理单击事件的代码），但我认为最好是这样编写HTML：

<div class="r">
    <div class="button on">
        <span>Shatin</span>
    </div>
    <div class="button">
        <span>Bay</span>
    </div>
    <div class="button">
        <span>Bay</span>                           
    </div>
</div>

这使得只需添加或删除on类就可以轻松地动态打开或关闭按钮

虽然不是必需的，但您可能也对查看CSS3渐变感兴趣，以创建简单的渐变背景图像，然后在没有任何渐变支持的浏览器中很好地降级为图像

---

类名“r”和“b”不是很具有描述性。除非一些HTML/CSS小型化程序将这些代码放入您的开发代码中，否则我将考虑给您的类提供更具描述性的名称。

这不是HTML：“代码>类=“SRC=”StureSbTNyOn.PNG。“。我认为您的示例中缺少了一些内容。谢谢您的建议，我已经更新了问题。@CharlesYeung:您的代码看起来很奇怪。这是您第一次编写HTML吗？@nhahtdh:再次更新，很抱歉

$（此）[0]

是多余的；只需使用

这个

。这不是HTML:

class=“src=”store\u btn\u on.png“

。我认为您的示例中缺少了一些东西。谢谢您的建议，我已经更新了这个问题。@charlesheung:您的代码看起来真的很奇怪。这是您第一次编写HTML吗？@nhahdh:再次更新，很抱歉

$（这）[0]

是多余的；只需使用

这个

。我是否应该在css中为按钮图像添加

宽度

和

高度

？@CharlesYeung可能是的。您可能还想制作不同的版本，如

.button.small

和

.button.large

。然后在HTML中您可以使用

class=“small button>“

或

class=“button”

或

class=“large button”

您的第一句话很好地说明了这一点：如果您想要与移动浏览器（尤其是旧浏览器）兼容，此解决方案是不好的。例如，symbian不会捕捉到这些“按钮”，这使得很难点击它们。我是否应该在css中为按钮图像添加

宽度

和

高度

。您可能还需要制作不同的版本，如

.button.small

和

.button.large

。然后，在HTML中，您可以只使用

class=“small button”

或

class=“button”

或

class=“large button”

您的第一句话很好地说明了这一点：如果您想要与移动浏览器（尤其是旧浏览器）兼容，这个解决方案是不好的。例如，symbian不会捕捉到这些“按钮”，这使得很难点击它们