网页中，鼠标点击与javascript的click事件怎么区分处理
就下面问题发现另一个方式：
js代码：
<script>
//IE
if(document.all) {
document.getElementById("clickme").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("clickme").dispatchEvent(e);
}
</script>
-----------------------------------------
开发中遇到分组的复选框的情况，当组内全部选中后组名自动选中，实现组名和组元素的联动效果。
下面是第一次demo，只进行联动效果
<!doctype html>
<html >
<head>
<meta charset="utf-8" />
<title>
new document
</title>
<script type="text/javascript" src="jquery-1.8.3.js">
</script>
<script type="text/javascript">
$(function() {
$("li input[name='input_list']").click(function() {
var counts = $("li input[name='input_list']").length;
var checkcounts = $("li input[name='input_list']:checked").length;
if (counts == checkcounts) {
$("#chkAllFlags").attr("checked", true);
} else {
$("#chkAllFlags").removeAttr("checked");
}
}) $("input[flag='1']").click(function() {
var checktemp = $(this).attr('checked');
if (checktemp == undefined) checktemp = false;
$("input[name='input_list']").each(function() {
$(this).attr('checked', checktemp)
});
//alert($("input[flag='1']").attr('checked'));
}); })
</script>
<style>
ul{
width:600px;
list-style:none;
line-height:20px;
line-height:20px;
}
.advancExpand02ul li{
list-style-type:none;
float:left;
width:150px;
line-height:20px;
margin-right:5px;
}
</style>
</head>
<body>
<div class="advancExpand02" id="salesFlagList">
<div class="advancExpand01">
<span>
<input type="checkbox" class="checkboxN5 checkboxNhover" id="chkAllFlags"
flag="1" name="input_list">
</span>
<span>
特销
</span>
</div>
<div class="advancExpand02Con" id="salesFlagSubList" >
<ul class="advancExpand02ul">
<li>
<input type="checkbox" flag="2" name="input_list"><span>北京师范大学</span>
</li>
<li>
<input type="checkbox" flag="4" name="input_list"><span>和平里第四小学</span>
</li>
<li>
<input type="checkbox" flag="8" name="input_list"><span>北师大燕华附中</span>
</li>
</ul>
</div>
</div>
</body>
</html>
但是当再次进入页面要求把选中内容复现时，组名联动效果失效，组元素已经全部选中，但是触发的click事件中 checkcounts值为选中的复选框数量减一，无法触发联动效果（我使用的是jQuery的click()方法）
知乎看到的分析：
两种方式，事件监听函数的caller属性不一样：手动点击是null；Js点击是一个函数(但必须把click()方法的调用放到一个函数中，不能在全局作用域中直接调用，否则也是null)。
作者：匿名用户
链接：https://www.zhihu.com/question/31259853/answer/51728450
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 <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>
网页中，鼠标点击与javascript的click事件怎么区分处理的更多相关文章
- [C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情 （转载）
当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...
- 关于网页中鼠标动作 onfocus onblur focus（）
其中: onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 例如: <textarea onfocus="if(hello') {va ...
- [置顶] ios 网页中图片点击放大效果demo
demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...
- C#之在treeview中鼠标点击的所选的节点触发事件
一.背景 如下图所示,我想实现通过鼠标点击treeview的根节点,然后在文本框控件中显示鼠标点击的节点号. 二.程序实现 因为是要通过鼠标点击才发生的事情,所以这属于一个事件,需要触发才行,刚开始不 ...
- JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...
- JavaScript 触发click事件 兼容FireFox，IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript"> function test2(name) { if(docume ...
- js中鼠标点击、移动和光标移动的事件触发
事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...
- jquery中对动态生成的标签响应click事件（二）…与ajax交互使用
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- jquery中对动态生成的标签响应click事件（一）
参考自:http://my.oschina.net/lishixi/blog/31612 <%@ page language="java" contentType=" ...
随机推荐
- English trip V2 - 3. A Healthy Diet Teacher:Corrine Key:各种前缀 im- un- in- re- over- under-
In this lesson you will learn to talk about foot and drink for a healthy diet. 课上内容(Lesson) What do ...
- Activity的介绍
Activity类是Android应用程序的重要组成部分,activity的启动和组合方式是平台应用程序模型的基本组成部分.Android系统通过调用与其生命周期的特定阶段相对应的特定回调方法来启动A ...
- fail to resolve com.umeng.analytics:analytics:latest.integration
今天友盟接入的时候,他娘的居然提示我这个友盟jar包拉不下来 明明之前还好好的,而且别的什么东西都没问题,就这个有问题 原来使用的是 compile "com.umeng.analytics ...
- vue项目中使用插件将字符串装化为格式化的json数据（可伸缩）
插件地址:https://www.npmjs.com/package/vue-json-viewer 第一步:安装vue-json-viewer插件 $ npm install vue-json-vi ...
- ssh跳过knownhost文件
在平时工作中,有时候需要SSH登陆到别的Linux主机上去,但有时候SSH登陆会被禁止,并弹出如下类似提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- 蓝桥杯第九届省赛 sscanf（）,str.c_str()函数的使用
标题:航班时间 [问题背景]小h前往美国参加了蓝桥杯国际赛.小h的女朋友发现小h上午十点出发,上午十二点到达美国,于是感叹到“现在飞机飞得真快,两小时就能到美国了”. 小h对超音速飞行感到十分恐惧.仔 ...
- 初学Git命令
初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...
- 关于mfc学习小记(bug小记)
关于控件问题 基本上出错的都是类型不为LPCTSTR 解决方式: 1.字符串转换 _T(str) 例:_T("你说的都对") 关于button控件 按照老旧的方式为其关联函数中添加 ...
- es6,es7,es8
概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...
- js插入HTML代码，渲染页面
<style>td{border:solid 1px #000;}</style> <table><tr id="data_list"&g ...