网页中，鼠标点击与javascript的click事件怎么区分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页中，鼠标点击与javascript的click事件怎么区分相关的知识，希望对你有一定的参考价值。
某些网站的确会进行区分操作，区别如下：如果只是在 jQuery 里的话，可以判断 e.originalEvent 是否存在。不在 jQuery 里，可以判断 clientX, pageX 之类的坐标属性是否为零。
当然，对于第三方脚本通过 document.createEvent() 和 dispatchEvent 触发的事件，如果他们也伪造了这些坐标值，就不太有什么办法了。只能依赖浏览器更底层的安全策略，即
给你几种可测试代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试用户点击和js点击</title>
<script src='jquery-1.10.2.min.js'></script>
</head>
<body>
<button id="btn">Click</button>
<script>
// 来源：http://www.zhihu.com/question/31259853
$(document).ready(function()
// 方式1
a();
// 方式2
// b();
// b2();
// 方式3
// c();
// 方式1：btn.click.caller
function a()
var btn = $('#btn');
// 赋予事件
btn.click(function()
console.log(btn.click.caller);
if(null === btn.click.caller)
// 用户点击的
alert('用户点击了');
else
// JS代码调的
alert('JS点击了');
);
btn.click();
// 方式2: e.originalEvent（jquery）
function b()
var btn = $('#btn');
// 赋予事件
btn.click(function(event)
// event.originalEvent => MouseEvent
if(event.originalEvent)
// 用户点击的
alert('用户点击了');
else
// JS代码调的
alert('JS点击了');
);
btn.click();
// 方式2：pageX, clientX（原生js），也阔以是offsetX/layerX/screenX
function b2()
// 原生js实现
var btn2 = document.getElementById('btn');
// DOM0级事件实现
btn2.onclick = function(event)
if (event.pageX)
alert('用户点击了');
else
alert('JS点击了');
btn2.click();
// 方式3: event.isTrusted IE9+/firefox支持
function c()
var btn = $('#btn');
// 赋予事件
btn.click(function(event)
// event.originalEvent => MouseEvent
if(event.isTrusted)
// 用户点击的
alert('用户点击了');
else
// JS代码调的
alert('JS点击了');
);
btn.click();
);
</script>
</body>
</html> 参考技术A 我认为你想问的是鼠标点击与click之间的联系与差别。
在javascript中，对于鼠标点击的响应，其实不止click事件一种。
还有mouseup、mousedown。
如果仅仅是从你鼠标点击来看，其实是不容易区分着三者的，因为click的分解就是后二者。唯有对这三者的响应函数各自设置，才能区分出来。
具体可以参照W3C的JavaScript事件。 参考技术B 如果只是在 jQuery 里的话，可以判断 e.originalEvent 是否存在。不在 jQuery 里，可以判断 clientX, pageX 之类的坐标属性是否为零。
当然，对于第三方脚本通过 document.createEvent() 和 dispatchEvent 触发的事件，如果他们也伪造了这些坐标值，就不太有什么办法了。只能依赖浏览器更底层的安全策略，即 @贺师俊 说的 DOM Level 3 标准， event.isTrusted 。
这个属性目前只有 Firefox 和 IE 9+ 支持。并且 IE 上的支持还不完全。 参考技术C 没区别啊，click就是鼠标点击的时候触发啊 参考技术D js的click事件不就是鼠标点击事件吗
clickat和clickon的区别
区别：clickat和clickon都是指点击事件，不同之处在于：clickat指的是点击一个特定的位置，而clickon指的是点击一个特定的元素。例如，在网页中，可以使用clickat来点击网页上的某个具体位置，而使用clickon来点击一个按钮、超链接等元素。 参考技术A clickat是一种鼠标事件，它指在指定坐标位置单击鼠标，而clickon则是将鼠标悬停在某个元素上，然后单击鼠标左键，这种行为比clickat要更加精确。以上是关于网页中，鼠标点击与javascript的click事件怎么区分的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 和 jQuery 中 onclick 与 click的区别拙见