网页中，鼠标点击与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=" ...
随机推荐
- scrapy框架使用笔记
目前网上有很多关于scrapy的文章,这里我主要介绍一下我在开发中遇到问题及一些技巧: 1,以登录状态去爬取(带cookie) -安装内容: brew install phantomjs (MAC上) ...
- Java语言中的奇淫技巧
variable length parameter list(可变长度参数列表) 很久之前了解过有这么一种写法,但转眼即忘.今天在公司项目的代码里看到,有点小惊讶,写这代码的同事还是有点水平的...
- python标准库总的random函数用法
Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等.random中的一些重要函数的用法:1 ).random() 返回0& ...
- Java JTable视图窗口滚动并定位到某一行
java swing编程中需要和数据库打交道并用表格将数据展示出来,如果数据太多,可能显示窗口如下 这时数据太多就需要拖动垂直滚动条才能看到下面的数据,那如果我现在有这样一个需求,我希望往数据库里插入 ...
- Azure中block和Page的比较 Azure: Did You Know? Block vs Page Blobs
Azure storage service supports two types of blobs (blob, or BLOB, stand for Binary Large OBject, i.e ...
- linux所有命令不能用显示-bash: ls: command not found
所有的命令都显示找不到了,原因是修改了/etc/profile造成的 解决方法 1.修正属性文件中的错误 /usr/bin/vi /etc/profile 2.生效属性文件 source /etc/p ...
- redis数据库-VUE创建项目
redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...
- PDF 补丁丁 0.6.0.3326 版发布（修复提取图片的问题）
新的 PDF 补丁丁已经发布. 新版本更新了 PDF 渲染引擎. 另外修复了网友提出的提取图片功能中的两个问题.
- 增加 jQueryValidate的手机号验证功能
1.通过addMethod增加手机号的验证方法 (位置:和$('form').validate({}) 同级别) //增加手机号验证规则 $.validator.addMethod("isM ...
- 电子签名在K2中的应用
全球越来越多的企业开始使用电子签名(即eSignatures),在减少碳排放的同时简化业务流程,提高文档安全性,便于记录保存,并降低企业成本.在美国法律下,电子签名具备等同于手写签名的法律效力. 什么 ...