在JavaScript中获取鼠标在图片上的点击位置？

Question

I wrote below code to get co-ordinate of x/y in JAVASCRIPT , it's not working . 我写了下面的代码来获取JAVASCRIPT中x / y的坐标，它不起作用。

I want to create a color picker using this image when ever some one click on button pick color then it prompts a window with color and button cancel , When user clicked on image than i need to find x/y co-ordinate so that i can specify which color it is . 我想使用此图像创建一个颜色选择器，当有人单击按钮选择颜色时，它会提示一个带有颜色且按钮取消的窗口，当用户单击图像时，我需要找到x / y坐标，以便我可以指定它是哪种颜色。

Problem is that these alerts are not working 问题是这些警报不起作用

alert(e.clientX - offsetl);
alert(e.clientY - offsett);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}
#dialogbox{
    display:none;
    position: fixed;
    background: #f2f2f2;
    border-radius:5px; 
    z-index: 10;
}
#dialogboxhead{background:white;height:40px;margin:10px;}
#text {float:left; text-align:center;margin:10px; font-size:19px;}
#cancel{float:left;margin:9px;}
#image{
    margin-top:0px;
    padding:10px;
}
</style>

<script type="text/javascript">
function CustomAlert(){
    this.render = function(dialog){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH+"px";
        dialogbox.style.left = (winW/2) - (550 * .5)+"px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
    }
    this.cancel = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Alert = new CustomAlert();
function position(e){
    var offsetl = document.getElementById('image').offsetLeft;
    var offsett = document.getElementById('image').offsetTop; 
    alert(offsetl);
    alert(offsett);
    alert(e.clientX - offsetl);
    alert(e.clientY - offsett);
}
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
    <div id="dialogboxhead">
     <p id="text">Select color</p>
     <input type="button" onClick="Alert.cancel()" id="cancel" name="Cancel" value="Cancel"/>
    </div>
    <div>
    <img id="image" src="color.png" onClick="position()"/>
    </div>
</div>
<button onclick="Alert.render('Hello World');" >pick color </button>
</body>
</html>

Answer 1

I recommend use jQuery and attach click event handler in you image. 我建议使用jQuery并在图像中附加click事件处理程序。 The event object return in jQuery include two properties, pageX and pageY. jQuery中的事件对象返回包含两个属性，pageX和pageY。 This properties contains mouse position relative to the top edge of the document ( jQuery Event Object ). 该属性包含相对于文档（ jQuery Event Object ）顶部边缘的鼠标位置。 The code look like this: 代码如下：

$(document).ready(function () {
    $('img#image').click(position);
});

function position(e) {
    var offsetX = e.pageX,
        offsetY = e.page;
}

The sample is in JSFiddle http://jsfiddle.net/zV3dH/ . 该示例位于JSFiddle http://jsfiddle.net/zV3dH/中。

I hope this help you. 希望对您有所帮助。

Answer 2

Try this code buddy.. Sure it works 尝试使用此代码伙伴。确定有效

 function getClickPos(e) {
     return {x:e.clientX,y:e.clientY};
 }

Now u can use it like this: 现在您可以像这样使用它：

document.querySelector("#img").onclick = function(e) {
 var pos= getClickPos(e);
 alert(pos.x);
 };

在JavaScript中获取鼠标在图片上的点击位置？

问题描述

2 个解决方案

解决方案1
1 2014-05-15 13:40:31

解决方案2
0 2016-11-25 16:34:51

在JavaScript中获取鼠标在图片上的点击位置？

问题描述

2 个解决方案

解决方案1 1 2014-05-15 13:40:31

解决方案2 0 2016-11-25 16:34:51

解决方案1
1 2014-05-15 13:40:31

解决方案2
0 2016-11-25 16:34:51