Question

我有以下Javascript打印用户点击位置的坐标：

$(document).bind('click', function () {
                            $('#clickimage').bind('click', function (ev) {
                                var $img = $(ev.target);
                                var offset = $img.offset();
                                var x = ev.clientX - offset.left;
                                var y = ev.clientY - offset.top;
                                var div = document.getElementById('clicklocations');
                                div.innerHTML = div.innerHTML + 'clicked at x: ' + x + ', y: ' + y + '<br>';
                            });
                        });

但是每次用户点击它都会有效，但是例如我点击了四次并打印出来：

clicked at x: 225.5, y: 149
clicked at x: 151.5, y: 117
clicked at x: 151.5, y: 117
clicked at x: 321.5, y: 175
clicked at x: 321.5, y: 175
clicked at x: 321.5, y: 175
clicked at x: 241.5, y: 251
clicked at x: 241.5, y: 251
clicked at x: 241.5, y: 251
clicked at x: 241.5, y: 251

Answer 1

$(document).bind('click', function () {
                            $('#clickimage').bind('click', function (ev) {
                                var $img = $(ev.target);
                                var offset = $img.offset();
                                var x = ev.clientX - offset.left;
                                var y = ev.clientY - offset.top;
                                var div = document.getElementById('clicklocations');
                                div.innerHTML = div.innerHTML + 'clicked at x: ' + x + ', y: ' + y + '<br>';
                            });
                        });

每次点击都会绑定一个额外点击文件的行为。

删除document.bind("click"

并且只保留此

$('#clickimage').bind('click', function (ev) {
                                var $img = $(ev.target);
                                var offset = $img.offset();
                                var x = ev.clientX - offset.left;
                                var y = ev.clientY - offset.top;
                                var div = document.getElementById('clicklocations');
                                div.innerHTML = div.innerHTML + 'clicked at x: ' + x + ', y: ' + y + '<br>';
                            });

或将其放在document.ready函数

中

Answer 2

每当您看到事件侦听器生成的重复输出时，您应该怀疑的第一件事是您多次绑定同一事件的侦听器。在你的情况下，你正在这样做。

每次针对您的文档触发点击时，您的#clickimage会附加一个侦听器

因此，每次点击都会重复增加

点击图片JavaScript检测每次实际点击多次点击

2 个答案: