鼠标按下时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上会在这里发挥最大的作用。我所说的故意是指他们可能出于其他原因主动这样做，例如，当您疯狂拖动时，您不想触发突然覆盖滑块的弹出菜单。