精华内容
下载资源
问答
  • js自动触发点击事件

    千次阅读 2020-08-18 10:23:28
    js自动触发点击事件 // 进入页面立即触发 (()=>{ // 兼容IE if(document.all) { document.getElementById("aid").click(); } // 兼容其它浏览器 else { var e = document.createEvent(...

    js自动触发点击事件

    //  进入页面立即触发
    		(()=>{
    			//  兼容IE
    		    if(document.all) {
    		        document.getElementById("aid").click();
    		    }
    		    //  兼容其它浏览器
    		    else {
    		        var e = document.createEvent("MouseEvents");
    		        e.initEvent("click", true, true);
    		        document.getElementById("aid").dispatchEvent(e);
    		    }
    		})();
    
    
    //  三秒后模拟点击
    setTimeout(function() {
        //  IE浏览器
        if(document.all) {
            document.getElementById("clickMe").click();
        }
        //  其它浏览器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("btn").dispatchEvent(e);
        }
    }, 3000);
    

    以下来自 https://blog.csdn.net/bellediao/article/details/105972387

    1、自动点击
    //自动点击的方法 clickId 点击事件的id属性值 字符串类型

    function autoClick(clickId) {
        // IE
        if (document.all) {
            document.getElementById(clickId).click();
        }
        // 其它浏览器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById(clickId).dispatchEvent(e);
        }
    }
    

    document.all是什么?
    document.all是IE 4.0及以上版本的专有属性,是一个表示当前文档的所有对象的数组,不仅包括页面上可见的实体对象,还包括一些不可见的对象,如html对象等等。all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此,这个 all[] 数组在已有的代码中仍然使用。

    document.all的三个作用:
    1、根据下标取元素:

    语法: document.all[index];

    index:要取的下标。

    document.all(0)表示页面内第一个元素。

    2、 根据 name/id 取元素。

    语法: document.all(“name/id” , index)

    第二个参数index,可选。index表示如果有多个相同的name/id,取name/id集合中的第几个。当然id不应该重复。通过给某个元素设置id属性(id=aaaa),然后用document.all.aaaa调用该元素。

    在document.all数组里面,元素不分层次,是按照其在文档中出现的先后顺序,平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象,比如document.all[“element”]这样。

    document.layers是Netscape 4.x专有的属性,是一个代表所有由储如

    等定位了的元素的数组。通常也是用
    或对象的id属性来引用的,但是这里面不包含除此以外的其它元素。新的统一的标准用document.getElementById等系列方法来引用DOM对象,而且Netscape 6.0以后放弃了layers特征,虽然IE继续保留了document.all,但这最终没有成为DOM标准的一部分。

    3、document.all可以判断浏览器是否是IE

    if(document.all){ alert(“is IE!”); }

    2、使用定时器 setInterval() 方法实现按钮自动触发onclick事件
    默认已点击,可以在加载网页的时候使用 onload 方法实现一次点击。

    以下例子,实现网页打开时默认弹出弹窗,在关闭弹窗后,每2秒钟自动点击一次弹出弹窗,完整的代码如下:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>自动点击例子</title>
    </head>
    <body onload="alert('这是默认点击弹窗')">
        <script type="text/javascript">
            setInterval(function () {
                if (document.all) {
                    document.getElementById("buttonid").click();
                }
                else {
                    var e = document.createEvent("MouseEvents");
                    e.initEvent("click", true, true);
                    document.getElementById("buttonid").dispatchEvent(e);
                }
            }, 2000);
        </script>
        <input id="buttonid" type="button" value="按钮" onclick="alert('这是自动点击弹窗')" />
        <style type="text/css">
            input {
                background: red;
                color: #fff;
                padding: 10px;
                margin: 20px;
            }
        </style>
    </body>
    </html>
    

    3、JQuery自动触发事件的方法。具体如下:
    常用模拟
    有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。

    在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

    $(’#btn’).trigger(“click”);

    这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果:

    $(’#btn’).click();

    触发自定义事件
    trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,JQuery代码如下:

    $('#btn').bind("myClick", function(){
     
      $('#test').append("<p>我的自定义事件.</p>");
     
    });
    

    //要触发这个事件,可以使用以下代码来实现:

    $(’#btn’).trigger(“myClick”);
    传递数据–trigger(type [,data])

    trigger(type[,data])方法有两个参数,第1个参数是要触发的事件类型,第2个参数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

    下面是一个传递数据的例子:

    $(function(){
     
     $('#btn').bind("myClick", function(event, message1, message2){
     
         $('#test').append( "<p>"+message1 + message2 +"</p>");
     
     });
     
     $('#btn').click(function(){
     
      $(this).trigger("myClick",["我的自定义","事件"]);
     
     }).trigger("myClick",["我的自定义","事件"]);
     
    })
    

    执行默认操作

    trigger()方法触发事件后,会执行浏览器默认操作。例如:

    $(“input”).trigger(“focus”);

    以上代码不仅会触发为元素绑定的focus事件,也会使元素本身得到焦点(这是浏览器的默认操作)。

    如果只想触发绑定的focus事件,而不想执行浏览器默认操作,

    可以使用jQuery中另一个类似的方法——triggerHandler()方法。

    $(“input”).triggerHandler(“focus”);
    该方法会触发元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框只触发绑定的focus事件,不会得到焦点。

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...script type="text/javascript"> setTimeout(()=>{ // 兼容.
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<button id="d1">你好</button>
    		<script type="text/javascript">
    			
    		setTimeout(()=>{
    			// 兼容IE
    			btn.onclick = function(){
    				console.log("d1");
    			}
    		    if(document.all) {
    		        document.getElementById("d1").click();
    		    }
    		    // 兼容其它浏览器
    		    else {
    		        var e = document.createEvent("MouseEvents");
    		        e.initEvent("click", true, true);
    		        document.getElementById("d1").dispatchEvent(e);
    		    }
    		},3000); // 3秒后执行	*/
    
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • 特殊情况:js触发input[file]的单击事件原文写于:2014-06-18想要通过ele.click()触发某个input[file]的click事件,直接执行不会有效果(包括直接在控制台执行代码或者计时器延时调用均不生效),但是放到某个a标签...

    方法一

    直接element.click(),此方法最简单最方便,但存在一定兼容性(具体兼容性如何未测试)。

    特殊情况:js触发input[file]的单击事件

    原文写于:2014-06-18

    想要通过ele.click()触发某个input[file]的click事件,直接执行不会有效果(包括直接在控制台执行代码或者计时器延时调用均不生效),但是放到某个a标签或者按钮的单击事件上却有效!也就是说必须用户主动去单击某个东西才能触发文本框的单击事件。

    演示:A标签直接打开文件窗口:

    浏览

    function browse()

    {

    document.getElementById('test').click();

    }

    备注:后面提到的方法二也无法直接控制台唤起file对话框,只能用户主动触发才可以。

    方法二

    通过MouseEvent来触发单击事件,具体兼容性也没有测试,但理论上比上面的好:

    /**

    * 考虑兼容性的触发单击事件

    * @param elem 要触发单击事件的DOM对象

    */

    function fireClickEvent(elem)

    {

    var event;

    if(window.MouseEvent) event = new MouseEvent('click');

    else

    {

    event = document.createEvent('MouseEvents');

    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    }

    elem.dispatchEvent(event);

    }

    延伸阅读

    展开全文
  • text/javascript"&gt; // 两秒后模拟点击 setTimeout(function() { // IE if(document.all) { document.getElementById("clickMe").click(); } // 其它浏览器 else { va...
     <script type="text/javascript">
    // 两秒后模拟点击
    setTimeout(function() {
        // IE
        if(document.all) {
            document.getElementById("clickMe").click();
        }
        // 其它浏览器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("clickMe").dispatchEvent(e);
        }
    }, 2000);
    </script>
      
    <a href="http://www.sinmeng.net" id="clickMe" onclick="alert('clicked');">触发onclick</a>

     

    展开全文
  • 在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟!一、...
  • JavaScript自动触发事件

    万次阅读 2019-02-17 11:05:46
    有时候,我们需要代码自动触发对应的事件,而不需要人为操作。比如,一个按钮的点击事件,不要点击它,而让它自动执行。 首先定义事件,先按照传统的 onclick 方式来。(这里以点击某个标签事件为梨) var xx = ...
  • JS自动触发onclick事件

    千次阅读 2020-04-04 21:40:07
    <div id="btn" οnclick="tip('...触发onclick</div> <script type="text/javascript"> function tip (msg){ alert(msg); } // 三秒后模拟点击 setTimeout(function() { // IE浏览器 if(docume...
  • 在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟! 一、...
  • 我想制作一个简单的javascript倒...Javascript中的addEventListener自动触发点击事件My Top Ten MoviesCountdown Suren's favorite ten movies Start NumberMovie和我的JavaScript文件...//get the start elementvar...
  • 原生js自动触发事件

    2019-11-13 15:06:27
    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch。该方法能模拟用户行为,如点击(click)操作等。 ...
  • 在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(),form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件。还有就是为了满足特定的需求,比如模块之间的...
  • js自动触发事件

    万次阅读 2016-06-19 20:46:36
    例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。 在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。 1 $('#btn')....
  • 背景前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等,但是如果...
  • jquery自动触发点击事件

    千次阅读 2020-06-30 16:31:10
    iframe内嵌页自动选中激发其父页面的点击事件。 纯手工解释: <html> //这是父级页面哦 <li > <a class="menuItem" th:href="@{/system/analyse}"><i id="reportAnalyse" class="fa fa-...
  • js自动触发事件&&自定义事件 Event

    千次阅读 2019-08-29 09:22:34
    在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(),form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟! 一、...
  • 进入页面自动执行点击事件,跳转的有些快,注意看那一瞬间的变化! <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> 测试title>...
  • 此处又体现出了谷歌和火狐的区别 var aaaa = "data:text/csv;charset=utf-8,\ufeff" + str; var link = document.createElement("a"); link.setAttribute("href", aaaa); var timestamp = (new Date()).valueOf...
  • js按钮页面加载时自动触发事件

    千次阅读 2020-04-13 17:26:14
    js事件页面加载时自动触发 一般按钮自动点击触发事件 id是按钮id值 $('#id').trigger("click"); layui下拉框按钮自动点击触发事件 lay-filter_value是下拉框的lay-filter的值 data_value 是下拉框的值 var select =...
  • js触发btn的点击事件: var btn = document.querySelector('#btn'); var event = new Event('click'); btn.dispatchEvent(event); 同理可以触发input的change事件: <input type="text" id="txt"> js...
  • js创建自定义事件或者自动触发已有事件一、eventTypeeventType共有5种类型:二、创建自定义事件或者自动触发已有事件 一、eventType eventType共有5种类型: HTMLEvents:包括 ‘abort’, ‘blur’, ‘change’...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,728
精华内容 35,891
关键字:

js自动触发点击事件