2016-10-01 7 views
0

私は、クリックイベントでマウス座標を取得し、それらを私に表示します。現在は動作していません。マウスクリックが座標を提供できません

これは私のスクリプトです:

<!doctype html> 
<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<body> 
    <script> 
    $(document).ready(
     $("#image").on({ 
     click: function (e) { 
      x=e.pageX; 
      alert(x); 
     } 
     }) 
    ) 
    </script> 
    <img src="back.jpg" id="image" height="100px" width="100px" /> 
</body> 
</html> 
+1

作品を作業jsFiddle機能の両方を作成中。何か他の場所で間違っています。 https://jsfiddle.net/3m7urj5p/ –

+0

まず件名を変更してください! –

+0

@ synthet1c - 真実。どちらにしてもかまいません。あなたの提案は、一度に1つのハンドラを追加することを可能にします。もう1つの方法では、ハンドラごとに1つのプロパティ、つまり1つのコールで複数のハンドラを追加できます。ここをクリックしてください:https://jsfiddle.net/3m7urj5p/1/ – enhzflep

答えて

3

はこれを試してください。..

$(document).ready(function(){ 
 
    $("#image").click(function (e){ 
 
     x=e.pageX; 
 
     alert(x); 
 
    }); 
 
});
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
 
</head> 
 
<body> 
 
\t <img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" id="image" height="100px" width="100px" /> 
 
</body> 
 
</html>

+0

OPで共有されているコードはうまくいきます。もしそうなら、なぜ答えるのですか? – Rayon

+0

@Rayonの質問はansで編集されました。当時私はこれを疑う。それは異なっていた。後の質問は編集だった。 –

+0

http://stackoverflow.com/posts/39805009/revisions – Rayon

1

編集

速記関数はのように私のために働いていません地元のためのOP機能ブロックは、完璧な作業している間が、私のために罰金jsFiddle Here

$(document).ready(function(){ 
    $("#image").click(function(e){ 
     x=e.pageX; 
     alert(x); 
    }); 
}); 
+0

OPで共有されるコードは正常に動作しています。もしそうなら、なぜ答えるのですか? – Rayon

+0

実際、そのコードは私のために働いていなかった..だから私は私の実装... !!!マイナス投票btwありがとう。 –

+0

何がうまくいかなかったのですか?私は質問の下のコメントに謎を共有しました..それを確認してください... – Rayon

0
<!DOCTYPE html> 
<html> 
<body> 


<p><strong>Tip:</strong> Try to click different places on image</p> 
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" width="100" height="100" onclick="showCoords(event)"/> 
<p id="demo"></p> 

<script> 
function showCoords(event) { 
var x = event.clientX; 
var y = event.clientY; 
var coords = "X coords: " + x + ", Y coords: " + y; 
document.getElementById("demo").innerHTML = coords; 
} 
</script>     
    </body> 
     </html> 
関連する問題