`

JS实现trigger click调用

 
阅读更多

 

转载:http://www.nowamagic.net/librarys/veda/detail/1698

实现模拟trigger click方法,实现方式判断浏览器,判断nodeName

依据是Safari/Chrome不支持非input/button元素的click方法。

function triggerClick( el ) {
	    var nodeName = el.nodeName,
	        safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
	    if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
	        try{
	            var evt = document.createEvent('Event');
	            evt.initEvent('click',true,true);
	            el.dispatchEvent(evt);
	        }catch(e){alert(e)};
	    }else{
	        el.click();
	    }
	}

 或者直接判断元素是否具有click方法即可

Safari/Chrome中非input/button元素没有click方法,返回undefined

unction triggerClick( el ) {
	    if(el.click) {
	        el.click();
	    }else{
	        try{
	            var evt = document.createEvent('Event');
	            evt.initEvent('click',true,true);
	            el.dispatchEvent(evt);
	        }catch(e){alert(e)};       
	    }
	}

 

分享到:
评论

相关推荐

    javascript实现相同事件名称,不同命名空间的调用方法

    本文将深入讲解如何在JavaScript(特别是jQuery库)中实现相同事件名称,但通过命名空间调用不同功能的方法。 首先,理解命名空间的概念。在JavaScript中,命名空间是一种组织代码的方式,可以防止变量或函数名冲突...

    使用trigger方式实现不用点击file类型的input弹出文件选择对话框

    这篇文章将探讨如何使用JavaScript和trigger方法来实现这一点。 首先,需要说明的是,在原生JavaScript中并没有一个名为trigger的函数。这里所说的“trigger方式”,实际上是指通过编程触发一个事件。在JavaScript...

    jQuery实现自动调用和触发某个事件的方法

    例如,如果你为同一个元素绑定了多个点击事件,那么`.click()`或`.trigger('click')`会依次调用所有这些函数。 除了点击事件,jQuery还支持其他各种内置事件,如`focus`、`blur`、`mouseover`、`mouseout`等,以及...

    js实现加载页面就自动触发超链接的示例

    这段代码首先通过`querySelector`方法获取了具有特定`href`属性的`<a>`元素,然后调用其`click`方法来模拟用户点击。这将导致浏览器执行与点击超链接相同的操作,即导航到指定的URL。 如果你有多个超链接需要处理,...

    jQuery.event.trigger()的简单解释

    在jQuery中,触发事件可以通过调用jQuery.event.trigger()函数实现。这个函数接受两个参数,第一个是要触发的事件名称,第二个是一个可选的数组,包含了传递给事件处理程序的额外参数。 下面,我们来看一个使用...

    基于jquery trigger函数无法触发a标签的两种解决方法

    另一种更直接且推荐的方法是将jQuery选择器转换为原生JavaScript对象,然后调用其`click()`方法。这能直接触发`<a>`标签的`click`事件,并执行默认的URL跳转。 ```javascript // 将jQuery对象转换为原生DOM元素 var...

    jquery trigger伪造a标签的click事件取代window.open方法

    但出于用户体验和浏览器安全限制的考虑,有时候开发者可能希望使用更为精细和可控的方式来处理点击事件,比如使用jQuery的trigger()方法来触发a标签的click事件,从而取代window.open()。 首先,我们需要了解什么是...

    读jQuery之十四 (触发事件核心方法)

    根据传入参数的不同,.trigger/.triggerHandler最终都会调用jQuery.event.trigger。在调用时,.trigger方法未传入true,而.triggerHandler方法传入true,此true参数用于指示仅执行事件的处理器而不进行冒泡和默认...

    Vue实现复制功能演示代码.zip

    这个压缩包可能包含了一个简单的Vue项目,演示了如何利用JavaScript(JS)库,如`clipboard.js`或Vue自带的方法来实现这个功能。下面我们将详细讨论如何在Vue中实现复制功能。 首先,我们需要引入一个辅助库,如`...

    jQuery中trigger()与bind()用法分析

    $("p").trigger("click"); ``` 这行代码会触发页面上所有段落元素的点击事件。trigger()不仅可以触发标准的DOM事件,还可以触发通过bind()绑定的自定义事件。例如,如果我们定义了一个名为“myEvent”的自定义事件...

    基于js+echaerts实现的3d柱状图

    本文将详细介绍如何使用JavaScript和ECharts来实现3D柱状图的制作过程。 首先,我们需要在项目中引入ECharts库。你可以通过npm或CDN链接来添加ECharts。如果是npm,可以使用以下命令: ``` npm install echarts ```...

    【JavaScript源代码】Echarts实现一张图现切换不同的X轴(实例代码).docx

    【JavaScript源代码】Echarts实现一张图现切换不同的X轴(实例代码)是关于使用Echarts库在Vue.js环境中创建动态图表的实践。Echarts是一个基于JavaScript的数据可视化库,能够生成丰富的交互式图表,适用于Web应用...

    vue实现百度echart地图省市级别点击下钻显示效果

    首先,我们需要了解Vue.js和百度ECharts的基本概念,然后逐步讲解实现这个功能的步骤。 Vue.js是一个轻量级的前端JavaScript框架,它采用组件化的开发方式,使得构建用户界面变得更加简洁高效。而百度ECharts则是一...

    jQuery如何使用自动触发事件trigger

    在选取到具体的DOM元素后,我们调用了.trigger("click")方法来触发click事件,模拟用户的点击操作。在这个场景下,当我们想在页面加载完毕后自动显示第一个链接对应的效果时,这种方法非常适用。 除了触发标准的...

    这是一个jquery写好的js万年历

    1. **调用简单**:该插件的设计理念就是简洁,只需引入相应的JS文件,通过简单的jQuery选择器和方法调用,即可快速在网页上实现万年历功能,无需额外的复杂代码。 2. **便捷高效**:jQuery的事件处理和DOM操作能力...

    jquery-3.1.1.js 、jquery-3.1.1.min.js 【jquery包 js】

    在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。这里我们主要关注的是jQuery 3.1.1版本,包括其常规版本与压缩版的特性及其在实际应用中的...

    echart 实现k线图

    trigger: 'item', formatter: function (params) { return params.value[0] + ' : ' + params.value[1]; } }, legend: { data: ['日K', '成交量'] }, xAxis: { type: 'category', data: ['Mon', 'Tue', '...

Global site tag (gtag.js) - Google Analytics