2016-10-01 185 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

作品。別的地方有什麼不對。 https://jsfiddle.net/3m7urj5p/ –

+0

請先更改主題! –

+0

@ synthet1c - 不真實。你可以這樣做。您的建議允許您一次添加一個處理程序,另一種方式允許您在一次調用中添加一堆處理程序 - 每個處理程序有一個屬性。看到這裏: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兩個功能對我工作的罰款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>