0

マウスの移動イベントで要素内のマウスの位置を検出しようとしていますが、Firefox では機能しません。

function mouseover_imageChange(imgid,imgArr) {
    var x= event.pageX- jQuery("#"+imgid).offset().left;
    var y= event.pageY- jQuery("#"+imgid).offset().top;
}

関数に渡す必要があるパラメーターとともに、すべてのブラウザーで機能させる方法について何か考えはありますか?

ありがとう、ムトゥ

4

2 に答える 2

1

jQueryを使用しているように見えるので、このようなものを使用してみませんか?

$(document).ready(function () {
    var startImgTracker = function (e) {
        $(this).mousemove(function (e) {
            console.log(JSON.stringify({
                "x": e.pageX,
                "y": e.pageY,
                "relativeX": e.pageX - $(this).offset().left,
                "relativeY": e.pageY - $(this).offset().top
            }));
        });
    };
    var stopImgTracker = function (e) {
        $(this).unbind('mousemove');
    };
    $('img').hover(startImgTracker, stopImgTracker);
});

イベントを使用しhoverてハンドラーをトリガーしmousemove（これが必要なようです）、「停止」hoverイベントを使用してmousemove. pageX現在のとを取得するには、必ずイベント引数を含めてくださいpageY。

これは、jQuery を実行するすべてのブラウザーで機能するはずです。

于 2012-10-01T02:21:30.067 に答える
0

@ムトゥ

これは、「ビューポートでマウスの X 座標と Y 座標を取得する」動作デモですhttp://jsfiddle.net/XsqBz/

そして、完全なソースの下を見つけてください。楽しみ。

<!doctype html> 
<html lang="en">
<head> 
<title>jQuery: Getting X and Y coordinates of the mouse in the viewport</title> 
<style> 
html{background:#f9f9f9;background-color:#f9f9f9;} 

body{background:#fff;background-color:#fff;color:#666;font-family:"Lucida Grande",Verdana,Arial,Georgia,"Bitstream Vera Sans","Bitstream Charter",sans-serif,serif;margin:2em auto;width:700px;padding:1em 2em;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;border:1px solid #dfdfdf;} 

body{ 
font-size:11px; 
line-height:15px; 
background:#fff;
background-color:#fff; 
color:#666; 
margin-left:20px; 
} 

strong{font-size:12px;}
a:link{color:#0066CC;}
a:hover{color:#FF6600;}
a:visited{color:#003366;}
a:active{color:#9DCC00;} 

p{font-size:18px;} 

.relativeX, .relativeY{color:#666;font-size:13pt;} 
.relativeX{font-size:48pt;color:#fc0;position:relative;top:-20px;left:30px;} 
.relativeY{font-size:52pt;position:relative;top:-09px;left:-10px;} 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head> 
<body> 
<!-- Move mouse over div to get position --> 
<div style="margin:10px;height:400px;width:90%;min-width:420px;background:#ccc;padding:20px;border:1px dotted #777;display:block;"> 
  relative to this 
</div>  
<script> 
(function($) { 
$(document).bind('contextmenu', function(){ 
  return false; 
}); 

  $('div').mousemove(function(e){ 
    // Relative to this div element instead of document 
    var relativeX = e.pageX - this.offsetLeft; 
    var relativeY = e.pageY - this.offsetTop;
    $(this).html('releativeX = <span class="relativeX">' + relativeX + '</span>, releativeY = <span class="relativeY">' + relativeY + '</span>'); 
  }); 
})(jQuery); 
</script>
</body> 
</html>
于 2012-10-01T03:44:50.300 に答える