【vue】模拟鼠标点击事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src='./vue.js'></script></head><body><div id="app"

menghaocheng

7139人浏览 · 2020-08-17 11:43:13

menghaocheng · 2020-08-17 11:43:13 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="app">
        <button id="hello" @click="clickHandleHello">Hello</button>
        <button id="world" @click="clickHandleWorld">World</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                clickHandleHello: function() {
                    alert("hello clicked")
                    setTimeout(function() {
                        debugger
                        var e = document.createEvent('MouseEvents')
                        e.initEvent('click', true, true)
                        document.getElementById('world').dispatchEvent(e)

                    }, 2000)
                },
                clickHandleWorld: function () {
                    alert("world clicked")
                }
            }
        })
    </script>
</body>
</html>

说明：

界面上有两个按钮：hello、world
点击hello按钮将触发clickHandleHello()被调用
clickHandleHello()开启了一个2秒定时器，2秒后模拟一个点击事件并把它派发给world这个按钮
最终会触发clickHandleWorld()被调用并弹出"world clicked"警告框

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^