网页中，鼠标点击与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=" ...
随机推荐
- Java多线程概念
1 多线程 1.1 什么是进程? 应用程序的一次运行产生进程. 为什么存在进程的概念? 1.2 什么是线程 参考:https://www.cnblogs.com/geeta/p/9474051.htm ...
- 自己封装的一个类似axios的请求
下载:https://pan.baidu.com/s/1k0-CpGGtfDTsCm85NMfuHA 使用: axios({ method:'post', baseURL:baseAddress, u ...
- NodeJS基础总结（一）
NodeJS官网网址:https://nodejs.org/en/ 使用require方法加载fs核心模块 var fs = require('fs'); 一.读取文件// 第一个参数就是尧读取的 ...
- Dockerfile封装Django镜像
部署过程 1.查看镜像 docker images 2.在/opt下建立了docker目录,下载一个django-2.1.7的源码包, mkdir -p /opt/docker cd /docker ...
- 使用 Laragon 在 Windows 中快速搭建 Laravel 本地开发环境 (转)
laravel学院 简介 对于那些使用 Windows 操作系统的同学来说,Homestead 和 LaraDock 虽说支持 Windows 系统,但是对初学者来说,安装配置起来还是有一定复杂度的, ...
- python--日志模块
一.logging模块就是python里面用来操作日志的模块,logging模块中主要有4个类,分别负责不同的工作 1. Logger 记录器,暴露了应用程序代码能直接使用的接口:简单点说就是一个创建 ...
- php 查询mysql数据批量转为PDF文件一（mac使用配置wkhtmltopdf html导出PDF）
数据转标准PDF查文档,查资料先转HTML标准格式再html转PDF 转PDF wkhtmltopdf工具是最佳选择 首先下载wkhtmltopdf https://wkhtmltopdf.org/d ...
- .NET反射简单应用———遍历枚举字段
反射(Reflection)是一个非常强大的工具,可以用来查看和遍历类型和类型成员的元数据:动态创建类型实例,动态调用所创建的实例方法.字段.属性:迟绑定方法和属性.此次要介绍的是使用反射查看类型成员 ...
- freemarker导出word档
1.word另存为xml:2.xml文件后缀名改成ftl:3.编写完整json字符串备用:4.修改ftl中动态字段为json中对应字段名:5.编写java代码自动生成word文件:(注意:换行用< ...
- UVa LA 4094 WonderTeam 构造 难度: 1
题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...