网页中，鼠标点击与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 - 4. Really Wild Teacher:Maple Key:Adjectives of feeling
In this lesson you will learn how to recognize animals and describe feeling. 课上内容(Lesson) 词汇(Key Wor ...
- Amazon 刷单的几种方式及安全性？
刷单需要注意的几个点 1.通过关键词,找产品.不要直接通过连接或者ASIN购买,容易被亚马逊监控. 2.添加购物车时最好添加同类产品表现好的三个到购物车,关联同类产品.在页面多浏览一下,多打开几个同类 ...
- 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示，但是在微信pc端上显示空白
原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...
- php 根据输入的参数，获取上季度最后一个月的时间
public function getTime( $time ='2017-06-01 00:00:00'){ $month = date('m',strtotime($time)); $season ...
- 微信小程序笔记
1.文件的作用 js,wxml,wxss,json 所有页面中要用到的变量,都放在可了pages目录下 wxml:类似于html文件 wxss:类似于css文件(类, id, 标签,子代,后代,bef ...
- linux命令：使用less从后向前查看日志信息
线上出问题的时候,我们常用tail-n 或者tail-f或者grep或者vicat等各种命令去查看异常信息,但是日志是在不停地刷屏,tail是动态的在变的,我们往往期望从日志最后一行往前一页一页的翻页 ...
- Python3+Requests-HTML+Requests-File解析本地html文件
一.说明 解析html文件我喜欢用xpath不喜欢用BeautifulSoup,Requests的作者出了Requests-HTML后一般都用Requests-HTML. 但是Requests-HTM ...
- Java IO编程全解（四）——NIO编程
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7793964.html 前面讲到:Java IO编程全解(三)——伪异步IO编程 NIO,即New I/O,这 ...
- APP包打包签名步骤
开发混合app上架应用市场,需要进行应用签名,但是申请签名如果没搞过,会特别麻烦,所以我自自己总结了一下申请的步骤,在此记录一下 1.首先需要下载安装java环境即jdk, 2.配置环境变量 假设JD ...
- 《程序设计入门——C语言》翁恺老师 第一周编程练习记录
1 输出“Hello World”(5分) 题目内容: 请输出一行,内容为 Hello World 请注意大小写. 由于这一周只是简单地介绍了C程序的基本框架,还不能做很多事情,甚至还不能做数据的输入 ...