Question

我在下面编写代码来获取JAVASCRIPT中x / y的坐标，它不起作用。

我想使用此图片创建颜色选择器当有人点击按钮选择颜色然后它会提示一个颜色和按钮取消的窗口，当用户点击图像时，我需要找到x / y坐标，以便我可以指定它是什么颜色。

问题是这些警报无法正常工作

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

我建议使用jQuery并在你的图片中附加点击事件处理程序。 jQuery中的事件对象返回包括两个属性，pageX和pageY。此属性包含相对于文档上边缘的鼠标位置（jQuery Event Object）。代码如下所示：

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

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

示例位于JSFiddle http://jsfiddle.net/zV3dH/。

我希望这对你有所帮助。

Answer 2

试试这个代码伙伴..当然有效

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

现在你可以像这样使用它：

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

在javascript中获取图像上的鼠标点击位置？

2 个答案: