マウスがダウンしたときにJavascript mouseenterイベントが機能しない

Question

私は<input type="range">スクロールを持ち、はmouseoverとmouseleaveのバックグラウンドを変更しています。ここで作業コードを確認することができます：http://jsfiddle.net/y8S57/、type="range"はWebkitのみで動作するため、Webkitブラウザを使用してください。

問題は、マウスがtype="range"ボタンの上にダウンしていると、それぞれのイベントがトリガされていないmouseoverとmouseleaveゾーンに入った場合。何とかtype="range"を使用すると、起こっているはずの他のイベントがキャンセルされます。

<input type="range">をドラッグしてマウスを上回ると、どうすればいいですか？mouseoverdivmouseoverイベントがトリガーされますか？

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に掲載して行いますここで一番良い。意図的には、スライダーを突然覆うフライアウトメニューをトリガーしたくない場合など、他の理由で積極的にこれを行うことになります。