网页中，鼠标点击与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=" ...
随机推荐
- vue中data中引用本地图片报错404
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...
- mysql 表关联批量更新
项目中最近遇到了需要手动修改某个表的某个字段的数据,但是这个数据是来自别的表,需要关联,所以需要用到关联的批量更新,特此记录一下. UPDATE t_account_trans_info AS iiI ...
- Lucene配置环境变量
更详细的内容请参考:http://www.cnblogs.com/itcsl/p/6804954.html 以下是参照上面的操作方式来说明的,首先下载lucene-6.2.1.zip文件,这个网上有的 ...
- 基于Qt的图像处理技术和算法
https://blog.csdn.net/silangquan/article/details/41008183
- windows下Redis安装及利用java操作Redis
一.windows下Redis安装 1.Redis下载 下载地址:https://github.com/MicrosoftArchive/redis 打开下载地址后,选择版本 然后选择压缩包 下载 R ...
- 数据仓库之Data Vault模型总结
一,Data Vault模型有几个主要的组件,这里先总结一下: 1.Hub组件,是一个数据表,用于记录在业务应用中常用到的业务实体键值,如员工ID,发票号.客户编号.车辆号等. 表内包括几个关键字段: ...
- django虚拟环境安装
虚拟环境主要是防止不同版本的模块之间的冲突,维护多个项目的时候这个非常重要. 虚拟环境的安装 sudo apt install python-virtualenv 虚拟环境安装成功后,直接创建一个虚拟 ...
- input radio单选框绑定change事件
html页面: <input type="radio" name="sex" value="female">female < ...
- 将本地项目部署到github远程仓库
近期写了一些项目,想把项目代码保存并分享出来,所以就想到了github. 下面就为大家介绍部署过程: 安装git客户端,请大家百度自行下载,这里就不做介绍了. 注册github账号,这个很简单,这里就 ...
- 记录一次配置golang服务器端口
之前配置程序监听端口,地址都写成IP+:Port的格式,然而一直调试不同,也找不出问题. 后来,参考博客https://blog.csdn.net/yoie01/article/details/214 ...