鼠标点击无法提供坐标

问题描述：

我想检索点击事件上的鼠标坐标并将其显示给我。目前它不工作。鼠标点击无法提供坐标

这是我的脚本：

<!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>

作品。别的地方有什么不对。 https://jsfiddle.net/3m7urj5p/ –

请先更改主题！ –

@ synthet1c - 不真实。你可以这样做。您的建议允许您一次添加一个处理程序，另一种方式允许您在一次调用中添加一堆处理程序 - 每个处理程序有一个属性。看到这里：https://jsfiddle.net/3m7urj5p/1/ – enhzflep

答

试试这个..

$(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>

由OP共享的代码工作正常..为什么回答如果是这样？ – Rayon

@Rayon问题用ans编辑。在我回答这个问题的时候。它是不同的。后来的问题是编辑。 –

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

答

编辑

速记功能不为我工作作为OP地方，而功能块的工作完美，但同时创造的jsfiddle两个功能对我工作的罚款jsFiddle Here

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

OP共享的代码工作正常..为什么要回答如果是这样？ – Rayon

其实，该代码不适合我..所以我已经实施了我的...... !!!感谢减去btw。 –

什么不起作用？我已经在下面的评论中分享了小提琴。检查出来...... – Rayon

答

<!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>

鼠标点击无法提供坐标

相关推荐