jQuery 坐标随浏览器/屏幕大小调整而变化

发布于 2024-12-27 07:49:52 字数 901 浏览 4 评论 0原文

在安斯托萨对之前的坐标问题提供了很多帮助之后，我想我最好开始一个新问题。

我遇到的问题是我正在设置一个 onclick 事件，并且活动事件的位置由图像的坐标确定。但是，如果我调整浏览器窗口的大小，坐标就会改变，并且该事件不起作用。确实如此，但不是我想要触发它的地方。

有没有办法有一个固定的工作参考？

我的代码

// 悬停时更改地图

jQuery('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    jQuery('#map-xy').html("X: " + x + " Y: " + y);
});

//Orange
jQuery('#map').on('click', function(e){
var x = e.clientX - this.offsetLeft,
    y = e.clientY - this.offsetTop;
if (x > 620 && x < 935 && y > 678 && y < 785) {
    jQuery(this).children('img').attr('src', '/javascripts/images/map-orange-  shadow.png');

}

});

当调整浏览器大小或用户具有不同的屏幕尺寸时，引用会发生变化，因此“if (x > 620 && x < 935 && y > 678 && y < 785)”没有引用我想要点击的区域。

我希望这更有意义

谢谢

干杯劳伦斯

原文

After much help from anstosa on a previous coords question I thought I'd better start a new question.

The problem I have is I am setting a onclick event and the possition of the active event is determined by the coords of the image. But if I resize the browser window the coords change and the event does not function. Well it does, but not where I want to trigger it.

Is there a way to have a fixed reference to work from?

My code

//change map on hover

jQuery('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    jQuery('#map-xy').html("X: " + x + " Y: " + y);
});

//Orange
jQuery('#map').on('click', function(e){
var x = e.clientX - this.offsetLeft,
    y = e.clientY - this.offsetTop;
if (x > 620 && x < 935 && y > 678 && y < 785) {
    jQuery(this).children('img').attr('src', '/javascripts/images/map-orange-  shadow.png');

}

});

When the browser is resized or a person has a different screen size the references change so "if (x > 620 && x < 935 && y > 678 && y < 785)" does not reference the area i want to click on.

I hope that makes more sense

Thanks

Cheers
laurence

分享到QQ

分享到微博