精华内容
下载资源
问答
  • 2020-07-08 11:53:18

    这篇文章是写给女朋友用来学习鼠标/键盘事件写的~勿喷

    鼠标事件

    鼠标事件概览

    mousedown:鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。

    mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。

    click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

    dblclick:双击鼠标左键时触发。

    mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。

    mouseout:鼠标移出目标元素上方。

    mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发。

    mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发。

    mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

    给元素绑定鼠标事件

    用JavaScript来绑定鼠标事件

    需要用到一个函数:addEventListener(event, function, useCapture);

    参数说明:
    event		不可为空。字符串,指定事件名。
    		 	不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
    		 	可选值为上述的事件概览:mousedown mouseup click等等
    		 
    function	不可为空。指定要事件触发时执行的函数。
    
    useCapture	可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
    			true - 事件句柄在捕获阶段执行
    			false- 默认事件句柄在冒泡阶段执行
    

    举例:

    <body>
    	<div id='a'></div>
    
    </body>
    <script>
    	//获取dom元素
    	var doma=document.getElementById("a");
    	a.addEventListener('click',function(){alert(1)},false);
    </script>
    

    键盘事件

    更多相关内容
  • 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 ...
  • WEB--js点击事件写法

    2021-01-22 15:30:00
    click 是方法,执行click就是模拟鼠标点击,同时会触发onclick事件 onclick是事件,给element赋予一种行为 click点击事件写法 方式一 # demo.html <input type="button" id="login" value="登录"> # ...

    click()和onclick()

    • click 是方法,执行click就是模拟鼠标点击,同时会触发onclick事件
    • onclick是事件,给element赋予一种行为

    click点击事件写法

    • 方式一:js添加点击事件
    # demo.html
    
    <input type="button" id="login" value="登录">
    
    # demo.js
    
    $(document).ready(function(){
        $('#login').click(function(){
            var name = document.getElementById("username").value;
            console.log(name)
        })
    }); 
    
    • 方式二:元素中直接加入点击事件
    # demo.html
    
    <input type="button" id="login" onclick="demo()" value="登录">
    
    # demo.js
    
    function demo(){
        var name = document.getElementById("username").value;
        alert(name);
    }
    
    • 方式二:addEventListener() 方法添加点击事件
    $(document).ready(function(){
        document.getElementById("login").addEventListener("click", function(){ 
            alert(document.getElementById("username").value);
        });
    }); 
    
    展开全文
  • JS鼠标事件(非常详细)

    千次阅读 多人点赞 2020-12-15 09:14:01
    在 JavaScript 中,鼠标事件Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型 项目 Value click 单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了...

    一、 常用到的鼠标事件

    在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示:
    鼠标事件类型

    项目Value
    click单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件
    dblclick双击鼠标左键时发生,如果右键也按下则不会发生
    mousedown单击任意一个鼠标按钮时发生
    mouseout鼠标指针位于某个元素上且将要移出元素的边界时发生
    mouseover鼠标指针移出某个元素到另一个元素上时发生
    mouseup松开任意一个鼠标按钮时发生
    mousemove鼠标在某个元素上时 持续 发生

    eg:在下面示例中,定义在段落文本范围内侦测鼠标的各种动作,并在文本框中实时显示各种事件的类型,以提示当前的用户行为。

    <p>鼠标事件</p>
    <input type="text" id="text" />
    <script>
        var p1 = document.getElementsByTagName("p")[0];  //获取段落文本的引用指针
        var t = document.getElementById("text");  //获取文本框的指针引用
        function f () {  //事件侦测函数
            var event = event || window.event;  //标准化事件对象
            t.value = (event.type);  //获取当前事件类型
        }
        p1.onmouseover = f;  //注册鼠标经过时事件处理函数
        p1.onmouseout = f;  //注册鼠标移开时事件处理函数
        p1.onmousedown = f;  //注册鼠标按下时事件处理函数
        p1.onmouseup = f;  //注册鼠标松开时事件处理函数
        p1.onmousemove = f;  //注册鼠标移动时事件处理函数
        p1.onclick = f;  //注册鼠标单击时事件处理函数
        p1.ondblclick = f;  //注册鼠标双击时事件处理函数
    </script>
    

    鼠标点击

    鼠标点击事件包括 4 个:click(单击)、dblclick(双击)、mousedown(按下)和 mouseup(松开)。其中 click 事件类型比较常用,而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时,会禁止绑定对象的默认行为。

    eg:在下面示例中,当定义超链接指向自身时(多在设计过程中 href 属性值暂时使用 “#”或“?”表示),可以取消超链接被单击时的默认行为,即刷新页面。

    <a name="tag" id="tag" href="#">a</a>
    <script>
        var a = document.getElementsByTagName("a");  //获取页面中所有超链接元素
        for (var i = 0; i < a.length; i ++) {  //遍历所有a元素
            if ((new RegExp(window.location.href)).test(a[i].href)) {
                //如果当前超链接href属性中包含本页面的URL信息
                a[i].onclick = function () {  //则为超链接注册鼠标单击事件
                    return false;  //将禁止超链接的默认行为
                }
            }
        }
    </script>
    

    鼠标移动

    mousemove 事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。
    示例
    下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。
    定义拖放元素为绝对定位以及设计事件的响应过程,这个比较容易实现。
    清楚几个坐标概念:按下鼠标时的指针坐标,移动中当前鼠标指针坐标,松开鼠标时的指针坐标,拖放元素的原始坐标,拖动中的元素坐标。
    算法设计:按下鼠标时,获取被拖放元素和鼠标指针的位置,在移动中实时计算鼠标偏移的距离,并利用该偏移距离加上被拖放元素的原坐标位置,获得拖放元素的实时坐标。

    如下图所示,其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值,它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。变量 mx 和 my 分别表示按下鼠标时,鼠标指针的坐标位置。而 event.mx 和 event.my 是事件对象的自定义属性,用它们来存储当鼠标移动时鼠标指针的实时位置。

    当获取了上面 3 对坐标值之后,就可以动态计算拖动中元素的实时坐标位置,即 x 轴值为 ox+event.mx-mx,y 轴为 oy+event.my-my。当释放鼠标按钮时,就可以释放事件类型,并记下松开鼠标指针时拖动元素的坐标值,以及鼠标指针的位置,留待下一次拖放操作时调用。
    在这里插入图片描述

    <div id="box" ></div>
    <script>
        // 初始化拖放对象
        var box = document.getElementById("box");
        // 获取页面中被拖放元素的引用指针
        box.style.position = "absolute";  // 绝对定位
        box.style.width = "160px";  // 定义宽度
        box.style.height = "120px";  // 定义高度
        box.style.backgroundColor = "red";  // 定义背景色
        // 初始化变量,标准化事件对象
        var mx, my, ox, oy;  // 定义备用变量
        function e(event){  // 定义事件对象标准化函数
            if( ! event){  // 兼容IE浏览器
                event = window.event;
                event.target = event.srcElement;
                event.layerX = event.offsetX;
                event.layerY = event.offsetY;
            }
            event.mx = event.pageX || event.clientX + document.body.scrollLeft;
            // 计算鼠标指针的x轴距离
            event.my = event.pageY || event.clientY + document.body.scrollTop;
            // 计算鼠标指针的y轴距离
            return event;  // 返回标准化的事件对象
        }
         // 定义鼠标事件处理函数
        document.onmousedown = function(event){  // 按下鼠标时,初始化处理
            event = e(event);  // 获取标准事件对象
            o = event.target;  // 获取当前拖放的元素
            ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
            oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
            mx = event.mx;  // 按下鼠标指针的x轴坐标
            my = event.my;  // 按下鼠标指针的y轴坐标
            document.onmousemove = move;  // 注册鼠标移动事件处理函数
            document.onmouseup = stop;  // 注册松开鼠标事件处理函数
        }
        function move(event){  // 鼠标移动处理函数
            event = e(event);
            o.style.left = ox + event.mx - mx  + "px";  // 定义拖动元素的x轴距离
            o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
        }
        function stop(event){  // 松开鼠标处理函数
           event = e(event);
           ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
           oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
           mx = event.mx ;  // 记录鼠标指针的x轴坐标
           my = event.my ;  // 记录鼠标指针的y轴坐标
           o = document.onmousemove = document.onmouseup = null;
           // 释放所有操作对象
        }
    </script>
    

    鼠标经过

    鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时,将触发 mouseover 事件;而当把鼠标指针移出某个元素时,将触发 mouseout 事件。如果从父元素中移到子元素中时,也会触发父元素的 mouseover 事件类型。

    eg:
    在下面示例中,分别为 3 个嵌套的 div 元素定义了 mouseover 和 mouseout 事件处理函数,这样当从外层的父元素中移动到内部的子元素中时,将会触发父元素的 mouseover 事件类型,但是不会触发 mouseout 事件类型。

    <div>
        <div>
            <div>盒子</div>
        </div>
    </div>
    <script>
        var div = document.getElementsByTagName("div");
        // 获取3个嵌套的div元素
        for(var i=0;i<div.length;i++){    // 遍历嵌套的div元素
            div[i].onmouseover = function(e){   // 注册移过事件处理函数
                this.style.border = "solid blue";
            }
            div[i].onmouseout = function(){   // 注册移出事件处理函数
                this.style.border = "solid red";
            }
        }
    </script>
    

    鼠标来源

    当一个事件发生后,可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标,可以使用 srcElement 属性。
    eg:
    在下面示例中,当鼠标移过页面中的 div 元素时,会弹出提示对话框,提示当前元素的节名称。

    <div>div元素</div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        div.onmouseover = function(e){ // 注册mouseover事件处理函数
            var e = e || window.event;  // 标准化事件对象,兼容DOM和IE事件模型
            var o = e.target || e.srcElement;  // 标准化事件属性,获取当前事件的节点
            alert(o.tagName);      // 返回字符串“DIV”
        }
    </script>
    

    在 DOM 事件模型中还定义了 currentTarget 属性,当事件在传播过程中(如捕获和冒泡阶段)时,该属性值与 target 属性值不同。因此,一般在事件处理函数中,有你哥哥使用该属性而不是 this 关键词获取当前对象。

    除了使用上面提到的通用事件属性外,如果想获取鼠标指针来移动某个元素,在 DOM 事件模型中可以使用 relatedTarget 属性获取当前事件对象的相关节点元素;而在 IE 事件模型中,可以使用 fromElement 获取 mouseover 事件中鼠标移到过的元素,使用 toElement 属性获取在 mouseout 事件中鼠标移到的文档元素。

    eg:
    在下面示例中,当鼠标移到 div 元素上时,会弹出“BODY”字符提示信息,说明鼠标指针是从 body 元素过来的;而移开鼠标指针时,又弹出“BODY”字符提示信息,说明离开 div 元素将要移到的元素。

    <div>div元素</div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        div.onmouseover = function(e){
            var e = e || window.event;
            var o = e.relatedTarget || e.fromElement;  //标准化事件属性,获取与当前事件相关的节点
            alert(o.tagName);
        }
        div.onmouseout = function(e){
            var e = e || window.event;
            var o = e.relatedTarget || e.toElement;  // 标准化事件属性,获取与当前事件相关的节点
            alert(o.tagName);
        }
    </script> 
    

    鼠标定位

    当事件发生时,获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性,不同浏览器分别在各自事件对象中定义了不同的属性,说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标,但是由于它们参照的坐标系不同,导致精确计算鼠标的位置比较麻烦。

    属性说明兼容性
    clientX以浏览器窗口左上顶角为原点,定位 x 轴坐标所有浏览器,不兼容 Safari
    clientY以浏览器窗口左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 Safari
    offsetX以当前事件的目标对象左上顶角为原点,定位 x 轴坐标所有浏览器,不兼容 Mozilla
    offsetY以当前事件的目标对象左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 Mozilla
    pageX以 document 对象(即文档窗口)左上顶角为原点,定位 x 轴坐标所有浏览器,不兼容 IE
    pageY以 document 对象(即文档窗口)左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 IE
    screenX计算机屏幕左上顶角为原点,定位 x 轴坐标所有浏览器
    screenY计算机屏幕左上顶角为原点,定位 y 轴坐标所有浏览器
    layerX最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 x 轴坐标Mozilla 和 Safari
    layerY最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 y 轴坐标Mozilla 和 Safari

    eg:
    下面介绍如何配合使用多种鼠标坐标属性,以实现兼容不同浏览器的鼠标定位设计方案。
    首先,来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持,应该说是最优选用属性,但是它们的坐标系时计算机屏幕,也就是说,以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率,不同的浏览器窗口大小和位置,都使得在网页中定位鼠标成为一件很困难的事情。

    其次,如果以 document 对象为坐标系,则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意,因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动,在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。

    IE 事件模型不支持上面的属性,为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系,且 IE 事件模型支持它们,可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量,所以还应加上相对于 window 对象的页面滚动的偏移量。

    var posX = 0, posY = 0;
    var event = event || window.event;
    if (event.pageX || event.pageY) {
        posX = event.pageX;
        posY = event.pageY;
    } else if (event.clientX || event.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    

    在上面代码中,先检测 pageX 和 pageY 属性是否存在,如果存在则获取它们的值;如果不存在,则检测并获取 clientX 和 clientY 属性值,然后加上 document.documentElement 和 document.body 对象的 scrollLeft 和 scrollTop 属性值,这样在不同浏览器中就获得了相同的坐标值。

    eg2:
    封装鼠标定位代码。设计思路:能够根据传递的具体对象,以及相对鼠标指针的偏移量,命令该对象能够跟随水保移动。

    先定义一个封装函数,设计函数传入参数为对象引用指针、相对鼠标指针的偏移距离,以及事件对象。然后封装函数能够根据事件对象获取鼠标的坐标值,并设置该对象为绝对定位,绝对定位的值为鼠标指针当前的坐标值。

    var pos = function (o, x, y, event) {  //鼠标定位赋值函数
        var posX = 0, posY = 0;  //临时变量值
        var e = event || window.event;  //标准化事件对象
        if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
            posX = e.pageX;
            posY = e.pageY;
        } else if (e.clientX || e.clientY) {
            posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }
        o.style.position = "absolute";  //定义当前对象为绝对定位
        o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
        o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
    }
    

    下面测试封装代码。为 document 对象注册鼠标移动事件处理函数,并传入鼠标定位封装函数,传入的对象为

    元素,设置其位置向鼠标指针右下方偏移(10,20)的距离。考虑到 DOM 事件模型通过参数形式传递事件对象,所以不要忘记在调用函数中还要传递事件对象。

    <div id="div1">鼠标追随</div>
    <script>
        var div1 = document.getElementById("div1");
        document.onmousemove = function (event) {
            pos (div1, 10, 20, event);
        }
    </script>
    

    eg3:
    获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标,但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。

    var event = event || window.event;
    if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
        x = event.offsetX;
        y = event.offsetY;
    } else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
        x = event.layerX;
        y = event.layerY;
    }
    

    但是,layerX 和 layerY 属性是以绝对定位的父元素为参照物,而不是元素自身。如果没有绝对定位的父元素,则会以 document 对象为参照物。为此,可以通过脚本动态添加或者手动添加的方式,设计在元素的外层包围一个绝对定位的父元素,这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差,可以适当减去 1 个或几个像素的偏移量。

    <input type="text" id="text" />
    <span style="position:absolute;">
        <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
    </span>
    <script>
        var t = document.getElementById("text");
        var div1 = document.getElementById("div1");
        div1.onmousemove = function (event) {
            var event = event || window.event;  //标准化事件对象
            if (event.offsetX || event.offsetY) {
                t.value = event.offsetX + "" + event.offsetY;
            } else if (event.layerX || event.layerY) {
                t.value = (event.layerX-1) + "" + (event.layerY-1);
            }
        }
    </script>
    

    这种做法能够解决在元素内部定位鼠标指针的问题。但是,由于在元素外面包裹了一个绝对定位的元素,会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下,可以考虑选用这种方法。

    鼠标按键

    通过事件对象的 button 属性可以获取当前鼠标按下的键,该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同,具体说明如下表所示。

    鼠标事件对象的 button 属性

    单击IE 事件模型DOM 事件模型
    左键10
    右键22
    中键41

    IE 事件模型支持位掩码技术,它能够侦测到同时按下的多个键。例如,同时按下左右键,则 button 属性值为 1+2=3;同时按下中键和右键,则 button 属性值为 2+4=6;同时按下左键和中键,则 button 属性值为 1+4=5;同时按下 3 个键,则 button 属性值为 1+2+4=7。

    但是 DOM 模型不支持这种掩码技术,如果同时按下多个键,就不能够准确侦测。例如,按下右键(2)与同时按下左键和右键(0+2=2)的值是相同的。因此,对于 DOM 模型来说,这种 button 属性约定值存在很大的缺陷。不过,在实际开发中很少需要同时检测多个鼠标按钮问题,一般仅需要探测鼠标左键或右键单击行为。

    eg:
    下面代码能够监测右键单击操作,并阻止发生默认行为。

    document.onclick = function (e) {
        var e = e || window.event;  //标准化事件对象
        if (e.button == 2) {
            e.preventDefault();
            return false;
        }
    }    
    

    当鼠标单击事件发生时,会触发很多事件:mousedown、mouseup、click、dblclick。这些事件响应的顺序如下:

    mousedown → mouseup → click → mousedown → mouseup → click → dblclick

    当鼠标在对象间移动时,首先触发的事件是 mouseout,即在鼠标移出某个对象时发生。接着,在这两个对象上都会触发 mousemove 事件。最后,在鼠标进入对象上触发 mouseover 事件。

    展开全文
  • 鼠标右键点击事件

    千次阅读 2021-12-14 13:17:15
    学习记录: 最近做了个文档相关的系统,其中用到了鼠标右键点击事件的处理,这里做个学习总结。 实现效果如下图所示: 思路整理: 1.MenuList :这数组中放的是显示的内容,我这里给了几个name展示效果,若是后台...

    学习记录: 最近做了个文档相关的系统,其中用到了鼠标右键点击事件的处理,这里做个学习总结。
    实现效果如下图所示:
    在这里插入图片描述
    思路整理:

    1.MenuList :这数组中放的是显示的内容,我这里给了几个name展示效果,若是后台接口传输数据原理一致。
    2.contextmenu.prevent :这是鼠标右击的点击事件,还有一个oncontextmenu 鼠标右击事件,前者是只有火狐浏览器支持,后者是所有浏览器都支持。菜鸟教程解释链接(菜鸟教程右击事件
    3.openMenu :自定义的方法,控制台输出可以判断出e的作用,根据用于判断鼠标右击的位置;item即是点击v-for中name对应的值。
    在这里插入图片描述
    4.visible :控制右击后显示的界面是否显示。
    5.:style :全局定义left和top,并传给对应右击位置的参数。
    6.watch :监听属性,当用户点击其他位置时,关闭visible界面。
    7.addEventListener :为元素添加点击事件。(菜鸟教程向指定元素添加事件句柄

    1.HTML代码如下所示:

    <div id="app">
            <div v-for="item in MenuList">
                <div @contextmenu.prevent="openMenu($event,item)" style="margin:12px; width:10%;">
                   {{item.name}}
                </div>
            </div>
            
            <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextMenu">
                <li>查看</li>
                <li>删除</li>
            </ul>
        </div>
    

    2.JS代码如下图所示:

    <script>
            var app = new Vue({
                el:'#app',
                data:{
                    visible: false,
                    top: 0,
                    left: 0,
                    MenuList: [
                        {name:'火锅'},
                        {name:'烤肉'},
                        {name:'猪蹄'}
                    ],
                },
                methods:{
                    openMenu(e,item) {
                        console.log("e",e);
                        console.log("item",item);
                        let x = e.clientX;
                        let y = e.clientY;
                        this.top = y;
                        this.left = x;
                        this.visible = true;
                    },
                    closeMenu() {
                        this.visible = false;
                    },
                },
                watch: {
                    visible(value) {
                        if (value) {
                            document.body.addEventListener('click', this.closeMenu)
                        } else {
                            document.body.removeEventListener('click', this.closeMenu)
                        }
                    }
                }
            })
        </script>
    

    3.CSS样式如下图所示:

    <style>
            .contextMenu{
                margin: 0;
                background: #fff;
                z-index: 3000;
                position: fixed;
                list-style-type: none;
                padding: 5px 0;
                border-radius: 4px;
                font-size: 12px;
                font-weight: 400;
                color: #333;
                box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
                text-align: center;
                width: 5%;
            }
            .contextMenu li{
                margin:8px;
            }
        </style>
    

    以上就是实现右击事件的全部代码,有需要的随便拿,若有不足的地方还望可以指正,共同进步。

    展开全文
  • Web前端js中鼠标事件

    千次阅读 2017-09-26 15:35:19
    鼠标移动事件鼠标在某元素上移动 onmouseover、onmouseout 冒泡进入父元素、子元素均改变 onmousemove、 onmouseenter、onmouseleave.
  • JavaScript模拟鼠标点击事件

    千次阅读 2022-02-14 14:20:23
    // 创建事件 var event = document.createEvent('MouseEvents') // 定义事件 参数: type, bubbles, cancelable event.initEvent('click', true, true) // 触发对象可以是任何元素或其他事件目标 element....
  • web-模拟鼠标事件

    千次阅读 2016-10-19 17:18:36
    鼠标事件: function mouseEvent(type, sx, sy, cx, cy) { var evt; var e = { bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0, screenX: sx, screenY:
  • 基于python异步io框架Tornado,结合JavaScript的onkeydown事件、 jQuery的mousedown、mouseup、touchstart、touchend事件以及Ajax,实现了监控遥控命令与web网页指定按键和鼠标(屏幕)点击事件的绑定,同时也实现了...
  • web自动化之鼠标悬停事件

    千次阅读 2019-05-31 22:51:02
    前言:我们在操作浏览器的时候,都需要...鼠标事件有:  1. 悬浮 - 用的最多最多 move_to_element  2. 右键 context_click  3. 点击 click  4. 双击 double_click  5. 拖拽 drag_and_drop  6. 滚动 — js  7...
  • 用一个基本窗口MFC程序实现WebBrowser控件对指定网页页面的加载、展示、点击事件响应,以及实现对鼠标在页面中点击标签事件的捕获,并且返回标签的超链接。 在VS2010环境下编译通过。
  • 页面上有这样一个非常普通的botton按钮,每次点击这个按钮的时候,不执行事件或执行完button的click事件后,会自动的重新刷新一下当前的页面。 二、原因 button,input type=button按钮在IE和w3c,firefox浏览器...
  • 测试页面代码 Web API文档 Button name 效果:
  • JavaScript事件 鼠标事件

    千次阅读 2022-03-29 15:25:14
    JavaScript事件,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。...对于 Web 应用来说,有...鼠标点击事件包括4个:click(单机)dblclick(双击)、mousedown(按下) 和 mouseup(松开),其中click件类型比...
  • Mouselog:paw_prints:Mouselog是一个基于Web的平台,网站所有者可以使用它记录,可视化和分析用户行为,例如鼠标跟踪数据。 实时演示https://mouselog.org/架构Mouselog conta Mouselog:paw_prints:Mouselog是一个...
  • web页面上经常遇到的鼠标事件有:鼠标悬停操作,鼠标右键,鼠标长按,拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName).trigger(eventName, position).trigger...
  • Java学习——GUI编程(鼠标单击按钮事件)Java学习——GUI编程(鼠标单击按钮事件)package 狂神说.p3;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt....
  • 用于监视用户在当前web页面上所有鼠标的移动、点击等操作和轨迹。以动画的形式进行展示。
  • selenium鼠标事件

    千次阅读 热门讨论 2019-08-06 11:26:28
    鼠标事件 对于鼠标事件,相信大家都不陌生。鼠标事件分很多种,其中有之前提到的单击,因为单击事件比较重要作者就早点介绍了。鼠标事件包含单击、双击、拖动右击等。最常用的就是单击。但是Selenium是比较强大的事...
  • a)鼠标事件 鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用的导航设备,在DOM3级事件上定义了9个鼠标事件,分别为: click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。 dbclick:当用户...
  • selenium + python 鼠标点击事件

    万次阅读 2017-08-27 21:41:40
    鼠标点击事件做了一些了解,从百度发现有很多相关内容 参考文章https://www.ibm.com/developerworks/cn/java/j-lo-keyboard/ 和 http://blog.csdn.net/liujingqiu/article/details/50475833 首先引入模块 from ...
  • Flutter Web 鼠标样式修改

    千次阅读 2021-12-28 17:03:56
    在使用Flutter开发Web中为了更好的交互体检,往往会根据需求动态修改鼠标样式。 MouseRegion( cursor: judgeMouseCursor(), onEnter: (PointerEnterEvent event) { mouseDragDirection = -1; }, onExit: ...
  • 获取鼠标的坐标,通过js任意获取鼠标点击处的位置坐标。
  • js鼠标事件

    2012-03-30 15:00:51
    很全的鼠标事件 方便开发时的js应用,并对每个事件所支持的浏览器有详细介绍
  • Selenium:鼠标、键盘事件

    千次阅读 2022-03-10 19:59:20
    鼠标事件 1、前面介绍了Selenium中模拟鼠标"左键单击"的方法click(),仅仅只有这个方法是完全不够的。现在的Web产品中提供了更丰富的鼠标交互方式 ⑴例如鼠标右击、双击、悬停、拖动等功能 ⑵同样的在Selenium中...
  • web中js实现鼠标移动切换图片

    千次阅读 2019-05-18 15:46:50
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • javascript按钮点击事件

    千次阅读 2021-06-12 17:26:33
    javascript 点击按钮触发事件使用onclick()点击事件触发。...设计功能函数,实现上图中赋值的功能。给按钮绑定上述函数,点击实现javascript按钮单击事件如何传入参数设置日 js...b按钮里有点击事件,怎样写让鼠标点击a...
  • 网页鼠标点击特效

    千次阅读 2020-07-06 19:38:12
    网页鼠标点击出现文字消失特效 效果展示: 点我 /* 鼠标点击特效 */ jQuery(document).ready(function($) { $("body").click(function(e) { //随机选择文字 var a_idx = Math.floor((Math.random() * ...
  • 演示如何在鼠标响应详细中判断当前用户是通过鼠标点击还是通过触摸完成当前动作,据此可以最大程度兼容传统Windows程序,同时保证触摸体验效果。
  • 2、把点击事件直接绑定到需要点击的标签上,而不是其祖先级,尽量不要用事件委托 曾在两个项目中适配IOS手机端Safari浏览器时遇到此问题,一个用第一种方法解决,另一个用方法一无效后搭配方法二解决。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 116,224
精华内容 46,489
关键字:

web鼠标的点击事件