`
流浪的我
  • 浏览: 34129 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

鼠标事件

 
阅读更多

鼠标事件是Web 开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了9 个鼠标事件。

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

         dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。这个事件并不是DOM2 级事件规范中规定的,但鉴于它得到了广泛支持,所以DOM3 级事件将其纳入了标准。 

        mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

        mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但DOM3 级事件将它纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

       mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但DOM3 级事件将它纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

        mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

        mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。

       mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。

       mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。除了mouseenter 和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件与其他事件是密不可分的关系。
只有在同一个元素上相继触发mousedown 和mouseup 事件,才会触发click 事件;如果mousedown 或mouseup 中的一个被取消,就不会触发click 事件。类似地,只有触发两次click 事件,才会触发一次dblclick 事件。如果有代码阻止了连续两次触发click 事件(可能是直接取消click事件,也可能通过取消mousedown 或mouseup 间接实现),那么就不会触发dblclick 事件了。这4个事件触发的顺序始终如下:

        (1) mousedown

        (2) mouseup

        (3) click

        (4) mousedown

        (5) mouseup

        (6) click

        (7) dblclick

显然,click 和dblclick 事件都会依赖于其他先行事件的触发;而mousedown 和mouseup 则不受其他事件的影响。
IE8 及之前版本中的实现有一个小bug,因此在双击事件中,会跳过第二个mousedown 和click事件,其顺序如下:

       (1) mousedown

       (2) mouseup

       (3) click

       (4) mouseup

       (5) dblclick

滚轮事件:

       IE 6.0 首先实现了mousewheel 事件。此后,Opera、Chrome 和Safari 也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome 及Safari)对象。与mousewheel 事件对应的event 对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta 属性。当用户向前滚动鼠标滚轮时,wheelDelta 是120 的倍数;当用户向后滚动鼠标滚轮时,wheelDelta 是120 的倍数。

将mousewheel 事件处理程序指定给页面中的任何元素或document 对象,即可处理鼠标滚轮的交互操作。

EventUtil.addHandler(document, "mousewheel", function(event){  
    event = EventUtil.getEvent(event);  
    alert(event.wheelDelta);  
});  

 这个例子会在发生mousewheel 事件时显示wheelDelta 的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta 的正负号就可以确定。

有一点要注意:在Opera 9.5 之前的版本中,wheelDelta 值的正负号是颠倒的。如果你打算支持早期的Opera 版本,就需要使用浏览器检测技术来确定实际的值,如下面的例子所示。

<!DOCTYPE html>
<html>
<head>
    <title>MouseWheel Event Example</title>
    <script type="text/javascript" src="/upload/files/201702/client.js"></script>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
</head>
<body>
    <div id="myDiv">Try scrolling your mouse wheel (IE, Safari, and Opera).</div>
    <script type="text/javascript">
        EventUtil.addHandler(document, "mousewheel", function(event){
            event = EventUtil.getEvent(event);
            var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
            alert(delta);
        });

    </script>
</body>
</html>

触摸设备:

iOS 和Android 设备的实现非常特别,因为这些设备没有鼠标。在面向iPhone 和iPod 中的Safari开发时,要记住以下几点。

       不支持dblclick 事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。

       轻击可单击元素会触发mousemove 事件。如果此操作会导致内容变化,将不再有其他事件发生;

如果屏幕没有因此变化,那么会依次发生mousedown、mouseup 和click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素(如链接),或者那些已经被指定了onclick 事件处理程序的元素。

       mousemove 事件也会触发mouseover 和mouseout 事件。

       两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。

分享到:
评论

相关推荐

    Qt的鼠标事件教程代码

    在Qt编程中,鼠标事件是用户与应用程序交互的重要方式,它们允许我们响应用户的鼠标操作,如点击、拖动等。本教程将详细讲解Qt中的鼠标事件处理,包括鼠标移动、按下、松开、单击和双击等基本事件类型。 1. **鼠标...

    鼠标事件助手触摸事件映射到鼠标事件并提供智能点击功能

    这个库的主要目标是帮助开发者在触摸屏设备上实现与鼠标事件类似的交互体验,从而确保跨平台的一致性。在现代Web应用中,尤其是在移动设备上,触摸事件的处理变得越来越重要,Mottle 正是为此而生。 Mottle 的核心...

    Qt 基于QGraphicsItem类重载鼠标事件函数的教训

    在开发一个基于Qt的项目,如一个简单的俄罗斯方块游戏时,我们可能会遇到需要对图形元素进行交互的需求,这时候就需要重载`QGraphicsItem`类的鼠标事件函数。本文将深入探讨这个主题,以避免在实际开发中重复遇到...

    QT linux下获取键盘和鼠标事件

    在QT框架下开发Linux应用程序时,获取键盘和鼠标事件是常见的需求,这有助于实现用户交互和界面控制。本文将深入探讨如何在Linux环境下利用QT库来捕获和处理这些事件。 首先,QT是一个跨平台的应用程序开发框架,...

    svg小例子(主要是鼠标事件)

    在本压缩包文件中,我们看到的是关于SVG元素与鼠标事件的一些简单实例,这对于初学者来说是很好的学习资源。 首先,我们要理解SVG中的基本元素。SVG包含多种图形元素,例如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`...

    海思hi3536开发板QT鼠标事件捕获,鼠标移动new.docx

    海思hi3536开发板QT鼠标事件捕获和鼠标移动 概述:本文主要介绍了海思hi3536开发板QT鼠标事件捕获和鼠标移动的实现方法,包括QT配置、鼠标事件捕获和显示、设备设置等内容。 一、QT配置 在海思hi3536开发板上实现...

    c#鼠标事件的使用小实例

    在C#编程中,鼠标事件是用户与图形用户界面(GUI)进行交互的重要部分。本文将深入探讨如何在C#中使用鼠标事件,通过一个小实例帮助初学者理解这些概念。 一、C#鼠标事件概述 C#中的鼠标事件通常与Windows Forms或...

    Delphi鼠标事件操作

    在Delphi编程中,鼠标事件是用户与应用程序交互的关键部分,它们允许开发者捕捉并响应用户的鼠标操作。Delphi提供了一系列的鼠标事件,这些事件在不同的鼠标动作发生时被触发,如点击、移动、双击等。理解并熟练使用...

    winform键盘和鼠标事件的捕捉与重写(快捷键)

    在Windows Forms(Winform)开发中,理解和掌握键盘和鼠标事件的捕捉与重写是至关重要的,这将有助于创建更加用户友好且响应灵敏的应用程序。本文将深入探讨如何在Winform应用中处理键盘输入事件、鼠标滚轮事件,并...

    js鼠标事件大全js鼠标事件大全

    JavaScript(简称JS)鼠标事件是网页交互中常用的一类事件,它们允许开发者在用户与页面上的元素进行鼠标操作时执行特定的功能。以下是一些主要的JS鼠标事件及其详细解释: 1. onClick:当用户单击鼠标按钮并在同一...

    文本框取鼠标事件文本框取鼠标事件

    根据提供的信息,我们可以深入探讨与“文本框取鼠标事件”相关的知识点。这主要涉及Web开发中的HTML和JavaScript技术,特别是如何在网页上处理文本框的鼠标事件。 ### 文本框与鼠标事件概述 #### 1. **文本框(Text...

    java鼠标事件--正弦曲线

    在Java编程中,鼠标事件(MouseEvent)是图形用户界面(GUI)编程的重要组成部分,它允许程序响应用户的鼠标操作。在这个“java鼠标事件--正弦曲线”的主题中,我们将深入探讨如何利用Java AWT和Swing库来处理鼠标...

    QT鼠标事件的集合!!

    在QT中,鼠标事件是用户与应用程序交互的重要组成部分,它允许程序对用户的鼠标操作做出响应。下面我们将详细探讨QT中涉及的各种鼠标事件: 1. **鼠标点击事件(QMouseEvent::MouseButtonPress)**:当用户按下鼠标...

    js常用方法(js常用鼠标事件和其对应的方法)

    在JavaScript中,处理用户交互的常见方式之一是利用鼠标事件。以下是一些JS常用的鼠标事件及其对应的方法: 1. `click`:当用户点击元素时触发。常用于按钮、链接等交互元素。 2. `dblclick`:双击元素时触发,通常...

    vb Hook 监听 捕捉键盘,鼠标事件

    标题中的"vb Hook 监听 捕捉键盘,鼠标事件"指的是通过钩子(Hook)技术来捕获并处理这些用户输入事件。 钩子是一种Windows操作系统提供的机制,允许应用程序设置一个或多个“陷阱”,当特定类型的事件发生时,系统...

    matlab编程的鼠标事件

    用matlab编程,对鼠标事件编程的小技巧,供大家相互交流学习总结。

    jquery鼠标事件的小例子

    这个"jquery鼠标事件的小例子"旨在帮助初学者更好地理解如何在jQuery中使用鼠标事件,同时结合CSS来实现交互效果。 首先,让我们深入了解一下jQuery中的鼠标事件。jQuery封装了许多原生JavaScript中的鼠标事件,...

    vlc2.2.1 SDK 添加鼠标事件

    在你提供的信息中,"vlc2.2.1 SDK 添加鼠标事件"是这次操作的核心内容,主要是针对Windows系统,增加了鼠标按钮的相关事件处理。 1. **WM_LBUTTONDOWN**: 这是Windows消息的一种,表示左鼠标按钮被按下。开发者可以...

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    ### 鼠标事件 鼠标事件与用户的鼠标操作相关,如点击、双击、移动等。以下代码展示了如何监听按钮的`onclick`事件和文本框的`ondblclick`事件: ```html &lt;!DOCTYPE html&gt; 鼠标事件 window.onload = ...

    flash鼠标事件处理

    在Flash CS4中,鼠标事件处理是创建交互性动画和应用程序的关键部分。了解如何有效地处理鼠标事件对于构建用户友好、动态的Flash内容至关重要。本文将深入探讨Flash CS4中的主要鼠标事件及其应用。 首先,我们要...

Global site tag (gtag.js) - Google Analytics