jQuery 自动触发事件的坑
有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮。Jquery中可以使用trigger()
方法模拟事件。
$(selector).trigger(event,[param1,param2,...])
event:必须,规定指定元素上要触发的事件。可以是自定义事件和标准事件。
param1,param2,...可选。传递到事件处理程序的额外参数。
额外的参数对自定义事件特别有用。
例如,模拟点击事件可以用以下的语句
$('#btn').trigger("click");
$('#btn').click();
但是,trigger()方法有一个问题,trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。某些情况下会带来一些不必要的后果,然而大多数的博客都都只说了trigger怎么用,没有讲会带来什么问题。
这里就需要介绍另外一个方法triggerHandler()
,triggerHandler() 不触发事件的默认行为。
trigger()与 triggerHandler() 方法相比的不同之处:
- 它不会引起事件(比如表单提交)的默认行为
- .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
以下菜鸟教程中有详细的代码参考
菜鸟教程在线编辑
jQuery 自动触发事件的坑的更多相关文章
- JQuery 自动触发事件
JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...
- jQuery自动触发事件
转自:https://blog.csdn.net/CY_LH/article/details/78982218 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发c ...
- jquery 自动触发事件 trigger
trigger() 栗子: 需求:我们在做二级联动的时候往往会遇到这样的需求,后台管理端页面加载完成后显示用户的省份,城市,并且可以对用户的省份,城市信息可以修改 如果只是简单的显示 你完全可以直接放 ...
- jquery自动触发click事件
$("").trigger("click"); //jquery的自动触发事件
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- jquery trigger 触发事件小计 -- 关于a标签
jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...
- javascript和jquery 获取触发事件的元素
一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Gwt ListBox选中自动触发事件
以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...
随机推荐
- ceph 源码安装 configure: error: "Can't find boost spirit headers"
问题:configure: error: "Can't find boost spirit headers" 解决: 推荐:sudo apt-get install libboos ...
- IO模型 IO多路复用
阻塞IO 用socket 一定会用到accept recv recvfrom这些方法正常情况下 accept recv recvfrom都是阻塞的 非阻塞IO 如果setblocking(False) ...
- Network - Tips
001 - 查询whois 可通过在线工具进行查询: https://www.whois365.com http://whois.aliyun.com http://whois.chinaz.com ...
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- android开发学习——day1
了解安卓系统架构:Linux内核层,系统运行层库,应用框架层,应用层 版本信息 android开发的特色之处就在于强大的组件功能 开发环境android stdio 2.0安装:把安装的组件都勾选上, ...
- 七、Framework类库
1.Framework类库简介 .Net Framework类库包含Framework类库(Framework Class Library,FCL).FCL是一组DLL程序集的统称,其中含有数千个类型 ...
- PHP-引入文件(include)后,页面错位,不居中解决办法
1.把include文件放在head里,不要放在html或doctype上面,这样可以解决居中的问题,空白行的话可以用<div style="display:none"> ...
- koa2 接收post参数
koa2接收Post参数由于没有在上下文对象上解析,所以需要用node 原生req解析. 获取到的参数,要注意转码问题. const Koa = require('koa'); const app = ...
- Python学习--11 面向对象高级编程
多重继承 Python里允许多重继承,即一个类可以同时继承多个类: class Mammal(Animal): pass class Runnable(object): def run(self): ...
- Redis注意事项
1.Redis3.0没有虚拟内存概念,已从2.4就移除: 2.redis挂掉并重启时,如果有主从备份的,主机挂掉重启时先关掉主从备份,不然从机的数据会被冲洗掉 数据恢复时如果有 AOF(原理是将Rei ...