精华内容
下载资源
问答
  • 常见鼠标事件

    千次阅读 2019-09-05 10:38:57
    常见鼠标事件有:单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都很多种。 为了方便,我是引入jQuery库进行操作的。 1、单击 写法1:直接使用 <p ...

    常见的鼠标事件有:单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。
    为了方便,我是引入jQuery库进行操作的。

    1、单击

    写法1:直接使用

    <p onclick="alert("单击");">单击</p>
    

    写法2:js调用

    <p>单击</p>
    <script>
    $('p').click(function () {
        alert("单击");
      });
    </script>
    

    写法3:封装函数

    <p onclick="dianji()">单击</p>
    <script>
    function dianji(){
    alert("单击");
    }
    </script>
    

    2、双击

    写法1:

    <p ondblclick="alert("双击显示的");">双击</p>
    

    写法2:

    <p>双击</p>
    <script>
    $('p').dblclick(function () {
        alert("双击");
      });
    </script>
    

    写法3:

    <p ondblclick="dianji()">双击</p>
    <script>
    function dianji(){
    alert("双击");
    }
    </script>
    

    3、鼠标移动上去

    写法1:

    <p onmousemove="alert("鼠标移动上去");">鼠标移动上去</p>
    

    写法2:

    <p>鼠标移动上去</p>
    <script>
    $('p').mousemove(function () {
        alert("鼠标移动上去");
      });
    </script>
    

    写法3:

    <p onmousemove="dianji()">鼠标移动上去</p>
    <script>
    function dianji(){
    alert("鼠标移动上去");
    }
    </script>
    

    4、鼠标离开

    写法1:

    <p onmouseout="alert("鼠标离开");">鼠标离开</p>
    

    写法2:

    <p>鼠标离开</p>
    <script>
    $('p').mouseout(function () {
        alert("鼠标离开");
      });
    </script>
    

    写法3:

    <p onmouseout="dianji()">鼠标离开</p>
    <script>
    function dianji(){
    alert("鼠标离开");
    }
    </script>
    

    5、鼠标按下

    写法1:

    <p onmousedownt="alert("鼠标按下");">鼠标按下</p>
    

    写法2:

    <p>鼠标按下</p>
    <script>
    $('p').mousedown(function () {
        alert("鼠标按下");
      });
    </script>
    

    写法3:

    <p onmousedown="dianji()">鼠标按下</p>
    <script>
    function dianji(){
    alert("鼠标按下");
    }
    </script>
    

    6、鼠标松开

    写法1:

    <p onmouseup="alert("鼠标松开");">鼠标松开</p>
    

    写法2:

    <p>鼠标松开</p>
    <script>
    $('p').mouseup(function () {
        alert("鼠标松开");
      });
    </script>
    

    写法3:

    <p onmouseup="dianji()">鼠标松开</p>
    <script>
    function dianji(){
    alert("鼠标松开");
    }
    </script>
    

    7、获取焦点

    写法1:

    <input type="text" onfocus="alert("获取焦点");" >
    

    写法2:

    <input type="text">
    $('input').focus(function () {
          alert("获取焦点");
      });
    

    写法3:

    <input type="text" onfocus="jiandian()" >
    function jiandian() {
            alert("获取焦点");
        }
    

    8、失去焦点

    写法1:

    <input type="text" onblur="alert("失去焦点");" >
    

    写法2:

    <input type="text">
    $('input').blur(function () {
          alert("失去焦点");
      });
    

    写法3:

    <input type="text" onfocus="jiandian()" >
    function jiandian() {
            alert("失去焦点");
        }
    

    附件:点击 jQuery v3.3.1 复制保存或直接连接网络版本:

    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    
    展开全文
  • 鼠标事件有哪些

    千次阅读 2018-09-24 15:20:35
    一、事件 事件是javaScript和DOM之间交互的桥梁。 你若触发,我便执行——事件...典型的例子:页面加载完毕触发load事件;用户单击元素,触发click事件。 二、事件流 1.事件流 问题:单击页面元素,什...

    ##一、事件
    事件是javaScript和DOM之间交互的桥梁。

    你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。

    典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。

    ##二、事件流
    1.事件流
    问题:单击页面元素,什么样的元素能感应到这样一个事件?

    答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面
    例子:有三个同心圆, 给每个圆添加对应的事件处理函数,弹出对应的文字。单击最里面的圆,同时也单击了外面的圆,所以外面圆的click事件也会被触发。

    事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。
    2、两种事件流模型
    事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。

    冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】

    捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

    事件捕获的思想就是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

    !DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="myDiv">Click me!</div>
    </body>
    </html>
    

    上面这段html代码中,单击了页面中的

    元素,

    在冒泡型事件流中click事件传播顺序为

    —》—》—》document

    在捕获型事件流中click事件传播顺序为document—》—》—》


    冒泡形事件传播 捕获型事件传播
    note:

    1)、所有现代浏览器都支持事件冒泡,但在具体实现中略有差别:

    IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。

    IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

    2)、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。

    3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。

    3、DOM事件流
    DOM标准采用**捕获+冒泡。**两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。
    捕获+冒泡

    DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

    事件捕获阶段:实际目标(

    )在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到再到就停止了。上图中为1~3.
    处于目标阶段:事件在
    上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
    冒泡阶段:事件又传播回文档。
    note:

    1)、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两次机会在目标对象上面操作事件。

    2)、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

    两次机会在目标对象上面操作事件例子:

    DOM3级事件中定义了9个鼠标事件。

    mousedown:鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。
    mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
    click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
    dblclick:双击鼠标左键时触发。
    mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
    mouseout:鼠标移出目标元素上方。
    mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发。
    mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发。
    mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

    note:

    在一个元素上相继触发mousedown和mouseup事件,才会触发click事件。两次click事件相继触发才会触发dblclick事件。

    如果取消 了mousedown或mouseup中的一个,click事件就不会被触发。直接或间接取消了click事件,dblclick事件就不会被触发了。
    3、鼠标左键和右键

    <script type="text/javascript">
    document.onmousedown=function (ev)
    {
        var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
        alert(oEvent.button);// IE下鼠标的 左键是1 ,  右键是2   ff和chrome下 鼠标左键是0  右键是2
    };
    </script>
    
    展开全文
  • JS常用鼠标事件

    千次阅读 2018-02-04 17:28:17
    JS常用鼠标事件  适合初学者的JS常用鼠标事件,包括 1、鼠标单击事件;2、鼠标双击事件;3、鼠标悬浮事件;4、鼠标移动事件;5、鼠标按下事件;6、鼠标抬起事件。 效果如图: 代码如下: JS...

    JS常用鼠标事件

            适合初学者的JS常用鼠标事件,包括 1、鼠标单击事件;2、鼠标双击事件;3、鼠标悬浮事件;4、鼠标移动事件;5、鼠标按下事件;6、鼠标抬起事件。

    效果如图:



    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS常用鼠标事件</title>
        <style>
            li{font-size: 18px;line-height: 35px;}
            li:hover{cursor:pointer;}
        </style>
    </head>
    <body>
        <ol>
            <li>单击我变色!</li>
            <li>双击有惊喜!</li>
            <li>鼠标滑过字体变大,鼠标离开字体变小!</li>
            <li>鼠标按下文字为红色,鼠标抬起文字为绿色,鼠标移动打印“鼠标在 li 中移动了...”!</li>
        </ol>
    
        <script>
            // 获取 li 标签
            var oLis = document.getElementsByTagName("li");
            /* 单击第一个 li */
            oLis[0].onclick = function () {
                this.style.backgroundColor = 'red';
            }
            /* ******************************************* */
            /* 双击第二个 li */
            oLis[1].ondblclick = function () {
                this.style.color = 'red';
            }
            /* ******************************************* */
            /* 鼠标滑过第三个 li */
            oLis[2].onmouseover = function () {
                this.style.fontSize = 22 + 'px';
            }
            /* 鼠标离开第三个 li */
            oLis[2].onmouseout = function () {
                this.style.fontSize = 18 + 'px';
            }
            /* ******************************************* */
            /* 鼠标按下第四个 li */
            oLis[3].onmousedown = function () {
                this.style.color = 'red';
            }
            /* 鼠标抬起第四个 li */
            oLis[3].onmouseup = function () {
                this.style.color = 'blue';
            }
            /* 鼠标在第四个 li 上移动 */
            oLis[3].onmousemove = function () {
                console.log('鼠标在 li 中移动了...');
            }
        </script>
    </body>
    </html>


    展开全文
  • 本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下。 mouseup 鼠标的键钮释放弹起。 click 鼠标左键(或中键)被单击。 ...
  • 一、js鼠标事件 1.单机 :左键单机、右键单机 2.双击 3.鼠标按下、鼠标松开 4.鼠标移动 5.鼠标进入、鼠标移出 6.鼠标滚轮滚动 二、JQuery鼠标事件整理 1.单机 :左键单机、右键单机 .Click():左键单机 为...

    一、js鼠标事件

    1.单机 :左键单机、右键单机

    2.双击

    3.鼠标按下、鼠标松开

    4.鼠标移动

    5.鼠标进入、鼠标移出

    6.鼠标滚轮滚动

    二、JQuery鼠标事件整理

    1.单机 :左键单机、右键单机

    .Click():左键单机

    为 JavaScript 的"click" 事件绑定一个处理器,或者触发元素上的 "click" 事件。(支持触屏的tab事件)

    .contextmenu():右键单机

    右键菜单按钮时间,可以拒绝右键菜单。

    2.双击

    .dblclick():双击触发

    3.鼠标按下、鼠标松开

    .mousedown():鼠标按下

    .mouseup():鼠标松开

    4.鼠标移动

    .mousemove():鼠标移动

    5.鼠标进入、鼠标移出

    .mouseenter():当鼠标移入某元素时触发。

    .mouselevave():当鼠标移出某元素时触发。

    .mouseout():当鼠标移出某元素时触发,移入和移出其子元素时也会触发。

    .mouseover():当鼠标移入某元素时触发,移入和移出其子元素时也会触发。

    6.鼠标滚轮滚动

    自带Jquery库不支持,有扩展库支持滚轮事件。

    7.其他jquery扩展事件

    .hover():将mouseenter/mouselave二个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。将一个单独事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。

    .toggle() :绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。

    三、鼠标event参数

    event常用参数

    • event.type:获取事件的类型,触发元素的事件类型
    • event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标,可以确定元素在当前页面的坐标值,是以页面为参考点,不随滑动条移动而变化
    • event.target:获取触发事件的元素

      thisevent.target的区别:

        js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

        this和event.target都是dom对象,可以转换为jquery对象:$(this)和$(event.target)

    • event.which:获取在鼠标单击事件中鼠标的左、中、右键(左键1,中间键2,右键3),在键盘事件中键盘的键码值
    • event.currentTarget : 获取冒泡前的当前触发事件的DOM对象, 等同于this
    • event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了
    • event.stopPropagation() :阻止事件冒泡,事件是可以冒泡的,为防止事件冒泡到DOM树上,不触发任何前辈元素上的事件处理函数,可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

    更多:

     Jquery 事件绑定使用整理

    JQuery图片滚动展示组件1_jCarouselLite图片滚动展示使用

    jquery.fancybox图片预览组件使用整理_fancyBox3使用整理

    展开全文
  • 常见以下8个: mousedown:鼠标的键钮被按下。 mouseup:鼠标的键钮被释放弹起。 click:单击鼠标的键钮。 dblclick:鼠标的键钮被按下。 contextmenu :弹出右键菜单。 mouseover:鼠标移到目标的上方。 mouse...
  • click----------------鼠标左键单击 执行完鼠标按下和抬起两个动作,才会触发 dblclick------------鼠标左键双击 contextmenu------鼠标...【注】经过当前绑定事件的标签,以及标签的子级元素,都会触发事件;经过当前标.
  • 在JavaScript 中,常见鼠标事件有: (1)鼠标按下事件 (2)鼠标抬起事件 (3)鼠标单击事件 (4)鼠标双击事件、
  • js常用鼠标事件汇总 onclick 单击事件(相继触发mousedown与mouseup事件) onmousedown 鼠标按下事件 onmouseup 鼠标抬起事件 onmousemove 鼠标移动事件 onmouseout 鼠标移出事件 onmouseover 鼠标指针移动到元素...
  • 常用鼠标事件

    2021-07-11 13:33:36
  • 很小的一个压缩软件,解压后是一个html文件,列出了JavaScript的常见事件,包括浏览器支持和简单描述等
  • 事件有三部分组成(也称事件三要素): 事件源(被触发的对象) 事件类型(如何触发,比如鼠标点击,鼠标经过,键盘按下等) 事件处理程序(通过函数赋值的方式) // 点击按钮后弹出一个对话框"hello world" // ...
  • 在JavaScript 中通过鼠标触发的事件我们常用: ①、鼠标点击事件; ②、鼠标移入事件; ③、鼠标移出事件; ④、事件冒泡; 下面就简单的介绍一些这几种事件,以及实例中的应用。 4、事件冒泡:是当多个...
  • 常见鼠标事件

    千次阅读 2016-11-09 00:00:47
    鼠标触发CSS事件  说明:  onMouseDown 按下鼠标时触发  onMouseOver 鼠标经过时触发  onMouseUp 按下鼠标松开鼠标时触发  onMouseOut 鼠标移出时触发  onMouseMove 鼠标移动时触  复制代码代码如下...
  • 本文实例讲述了Selenium鼠标与键盘事件常用操作方法。分享给大家供大家参考,具体如下: Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE...
  • ActionChains 类提供了鼠标操作的常用方法: perform() 执行所有ActionChains中存储的行为 context_click() 右击 double_click() 双击 drag_and_drop() 拖动 move_to_element() 鼠标悬停 二、详细使用...
  • 常用鼠标事件(event)

    千次阅读 2020-03-16 21:00:04
    常见鼠标事件 client:相对于浏览器可视区的坐标。(能看见的范围,无论你如何下拉翻页) page:相对于整个文档。即相对于整个页面的x,y轴坐标(距离) screen:相对于整个电脑屏幕的坐标 实现图片跟图片一起...
  • 鼠标事件与键盘事件

    2018-03-22 20:19:21
    鼠标事件鼠标事件有很多:click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好,大家看名字基本都懂是什么意思。其中,contextmenu是右键出现菜单事件,并不是右键...
  • 鼠标事件大全详解

    万次阅读 多人点赞 2019-08-20 15:21:53
    click:单击事件。 dblclick:双击事件。 mousedown:按下鼠标键时触发。 mouseup:释放按下的鼠标键时触发。 mousemove:鼠标移动事件。 mouseover:移入事件。...mouseover事件和mouseenter事件,都是鼠标进入...
  • jQuery鼠标事件

    千次阅读 2019-04-18 08:24:33
    在jquery中触发鼠标事件的方法6种分别是1、click(单击事件),2、dbclick(双击事件),3、mousedown(鼠标按下事件),4、mouseup(鼠标弹起事件),5、mouseenter(鼠标移入事件),6、mouseleave(鼠标移出...
  • 主要介绍了js鼠标按键事件和键盘按键事件用法,结合实例形式总结分析了JavaScript针对鼠标与键盘事件常用操作技巧,需要的朋友可以参考下
  • jQuery的鼠标事件总结

    2020-01-21 14:30:19
    jQuery的鼠标事件总结 1、click()事件。 2、dbclick()鼠标双击事件 3、mousedown()鼠标按下事件 4、mouseup()鼠标松开事件 5、mouseover()从一个元...
  • 鼠标点击事件大全

    2021-08-30 15:22:02
    click:单击事件。 dblclick:双击事件。 mousedown:按下鼠标键时触发...mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover
  • unity常用鼠标事件

    千次阅读 2018-09-19 14:57:50
    鼠标事件:    鼠标事件,都是当鼠标和gui或者碰撞体(Collider)交互时候触发。需要说明的是drag其实就是鼠标down后up之前持续每帧都会发送此消息。    OnMouseDown:当鼠标上的按钮被按下时触发的事件; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 114,410
精华内容 45,764
关键字:

常见的鼠标事件有哪些

友情链接: linux-device-drives-3.rar