首页 > 解决方案 > 有没有办法在手动触发时通过点击事件获取页面 X 和页面 Y

问题描述

我制作了一个带有点击功能的按钮。当我单击它时,我得到了页面 X 和页面 Y,但是当我尝试在此页面 X 中使用 button.trigger('click') 来单击按钮时,页面 Y 没有出现。

$('#click-me').click(function(e) {

  console.log('pageY', e.pageY);
  console.log('pageX', e.pageX);
});

setTimeout(function() {
  $('#click-me').trigger('click');
}, 1000);
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script
		  src="https://code.jquery.com/jquery-3.4.1.min.js"
		  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		  crossorigin="anonymous"></script>
</head>
<body>

	<button id="click-me">Click Me</button>
</body>
</html>

标签: jquery

解决方案


好吧,这是有道理的,因为手动触发的事件不涉及鼠标。您需要跟踪最后一个鼠标位置(通过监听鼠标移动事件)并像这样触发事件:https ://jsfiddle.net/ghnpjL4c/1/

$(function(){
    var lastX = 0;
    var lastY = 0;

  $('#clickMe').on('click', function(e){
    console.log("PageX " + e.pageX);
    console.log("PageY " + e.pageY);
  });

  $(document).on('mousemove', function(e){
    lastX = e.pageX;
    lastY = e.pageY;
  });

  setTimeout(function(){
    var e = $.Event('click');
    e.pageX = lastX;
    e.pageY = lastY;
    $('#clickMe').trigger(e);
  }, 3000);
})

推荐阅读