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上发布它会在这里做得最好。故意我的意思是他们可能出于其他原因积极地做这件事，例如当你疯狂拖动时你不会想要触发一个突然覆盖滑块的弹出菜单。

鼠标停止时Javascript mouseenter事件无效

1 个答案: