jquery - 鼠标按下时 JavaScript mouseenter 事件不起作用

Question

我有一个<input type="range">滚动和 div那个mouseover和mouseleave改变它的背景。您可以在此处查看工作代码:http://jsfiddle.net/y8S57/ ，请使用Webkit浏览器 type="range"仅适用于 Webkit。

问题是，如果鼠标放在type="range"上按钮并输入mouseover和mouseleave区域相应的事件不会被触发。以某种方式使用 type="range"取消应该发生的其他事件。

当我拖动 <input type="range"> 时，如何解决这个问题？我的鼠标悬停在 mouseover 上div mouseover要触发的事件？

HTML:

<input id="zoom" type="range" name="zoom" min="10" max="100" step="1" value="40" >
<div id="zone"></div>

JavaScript:

$("#zone").mouseenter(function(){
   $(this).css({background:"red"});
});

$("#zone").mouseleave(function(){
   $(this).css({background:"black"});
});

Answer 1

不幸的是，WebKit 似乎没有在其他元素上触发鼠标事件。我能为您提供的只是如何缩短代码:

$("#zone").hover(function(){
   $(this).css({background:"red"});
}, function(){
   $(this).css({background:"black"});
});

这不是一个您可以修复的错误(并且可能肯定是浏览器的故意行为)，请将其发布在 WebKit Bugzilla 上会在这里做最好的事。我所说的故意是指他们可能出于其他原因主动这样做，例如，当您疯狂拖动时，您不想触发突然覆盖 slider 的弹出菜单。