网页中,鼠标点击与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>
如果只是在 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>
展开全部
我认为你想问的是鼠标点击与click之间的联系与差别。
在JavaScript中,对于鼠标点击的响应,其实不止click事件一种。
还有mouseup、mousedown。
如果仅仅是从你鼠标点击来看,其实是不容易区分着三者的,因为click的分解就是后二者。唯有对这三者的响应函数各自设置,才能区分出来。
具体可以参照W3C的JavaScript事件。
在JavaScript中,对于鼠标点击的响应,其实不止click事件一种。
还有mouseup、mousedown。
如果仅仅是从你鼠标点击来看,其实是不容易区分着三者的,因为click的分解就是后二者。唯有对这三者的响应函数各自设置,才能区分出来。
具体可以参照W3C的JavaScript事件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
如果只是在 jQuery 里的话,可以判断 e.originalEvent 是否存在。不在 jQuery 里,可以判断 clientX, pageX 之类的坐标属性是否为零。
当然,对于第三方脚本通过 document.createEvent() 和 dispatchEvent 触发的事件,如果他们也伪造了这些坐标值,就不太有什么办法了。只能依赖浏览器更底层的安全策略,即 @贺师俊 说的 DOM Level 3 标准, event.isTrusted 。
这个属性目前只有 Firefox 和 IE 9+ 支持。并且 IE 上的支持还不完全。
当然,对于第三方脚本通过 document.createEvent() 和 dispatchEvent 触发的事件,如果他们也伪造了这些坐标值,就不太有什么办法了。只能依赖浏览器更底层的安全策略,即 @贺师俊 说的 DOM Level 3 标准, event.isTrusted 。
这个属性目前只有 Firefox 和 IE 9+ 支持。并且 IE 上的支持还不完全。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
没区别啊,click就是鼠标点击的时候触发啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
js的click事件不就是鼠标点击事件吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询