是否有更好的方法来处理"悬停"触摸设备上的活动?

时间:2016-05-26 00:09:01

标签: javascript jquery touch

有没有更好的方法来处理"悬停" (这点击,然后效果激活,直到其他东西被点击)触摸设备上的事件比使用全局事件处理程序来检测用户何时点击其他内容?

例如,此代码可能有效,但它依赖于附加到文档正文的事件侦听器,因此在性能方面存在问题。

//note a namespace is used on the event to clear it without clearing all event listeners
$('myDiv').on('touchstart.temp', function () {
    //do stuff
    $('body').not(this).on('touchstart.temp', function () {
        //undo stuff
        $('body').not(this).off('touchstart.temp');
    });
});

2 个答案:

答案 0 :(得分:1)

将来您应该可以使用适用于特定元素的touchentertouchleave事件。

$("myDiv").on("touchenter mouseover", function() {
    // do hover start code
}).on("touchleave mouseleave", function() {
    // do hover end code
});

但根据MDN,这只是一项尚未实施的提案。

如果您使用jQuery Mobile,则可以使用vmouseovervmouseleave事件来模拟移动设备上的鼠标事件。

答案 1 :(得分:0)

Javascript onmouseover和onmouseout事件工作正常! :)

它不会在移动设备上工作,但我相信你已经预料到了。

编辑:我还注意到你包含了JQuery标签。如果你喜欢的话,你也可以使用JQuery悬停方法。

$('div').hover(function(){
    $(this).css('background-color', 'red');
    }, function(){
    $(this).css('background-color', 'blue');
});

示例:https://jsfiddle.net/sofdz0s2/

至于悬停在所有触控设备上,所有触控设备之间并不恒定。水龙头后我不会继续徘徊。 (我尝试点击改变的div然后点击绿色div,但是在点击之后它一直在徘徊。)

编辑2:

正如评论中所说,touchenter和touchleave可能就是你想要的。

我希望这有帮助!