• js_事件类型——鼠标点击事件


    click:点击鼠标左键或者按下回车键触发。onclick事件处理程序也同样可以通过这两个方式执行。

    dblclick:DOM3级事件。双击鼠标左键。

    mousedown:单击鼠标左键。

    mouseup:松开单击着的鼠标左键。

    (click包括按下与松开鼠标左键两个步骤,mousedown仅仅是按下鼠标左键操作,mouseout是松开鼠标左键操作。因此在鼠标操作上click=mousedown+mouseup)

    mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡,而且移动到后代元素上不触发。DOM3级事件。(IE、Firefox、Opera)

    mouseleave:位于元素上方的鼠标光标移动到元素范围之外的时候触发。该事件不冒泡。光标移动到后代元素不触发。DOM3级事件。(IE、Firefox、Opera)

    mousemove:鼠标在元素内部移动时重复地触发(大概可以做鼠标的炫彩效果)

    mouseout:鼠标从一个元素移动到另一个元素时触发,该元素可以是原元素的外部元素或子元素。

    mouseover:鼠标在元素外部,首次进入元素时,触碰到元素边界后触发。(和mouseenter差不多应该)

    检测是否支持click、mousedown、mouseup、mousemove、mouseout、mouseover:

    var isSupported=document.implementation.hasFeature("MouseEvents","2.0");

    检测能否支持dblick、mouseenter、mouseleave:

    var isSupported=document.implementation.hasFeature("MouseEvent","3.0");

    1.客户区坐标位置

    这个位置信息保存在事件对象的clientX,clientY属性中。所有浏览器均支持这两个属性。(event.clientX,event.clientY)

    2.页面坐标位置

    pageX,pageY属性。在页面没有滚动的情况下他们的值与clientX、clientY的值相等。

    与客户区坐标位置的区别:

    客户区坐标位置是相对于视口,即浏览器显示页面的窗口的顶部与最左边的距离。页面坐标位置相对于页面本身。页面滚动会造成它们俩的数值不一致。

    3.屏幕坐标位置

    screenX、screenY属性用于确定相对于整个电脑屏幕的距离。event.screenX,event.screenY。

    4.修改键

    修改键分别为:Shift、Ctrl、Alt、Meta(windows键盘中是windows键,MacOs中是Cmd键)。

    分别对应:shiftKey、ctrlKey、altKey、metaKey四个属性。它们的值是布尔值,如果鼠标与这几个键的其中之一被一同按下,那么这些属性返回true值。

    5.相关元素

    mouseover事件发生时,事件的目标元素是获得光标的元素,但是有获得就有失去,此时的相关元素就是失去光标的元素。

    mouseout事件发生时,事件的目标元素时失去光标的元素,此时的相关元素是获得光标的元素。

    event.relatedTarget提供相关元素的信息。(有兼容性的问题,IE8及之前的版本不支持relatedTarget属性)

    6.鼠标按钮

    mousedown与mouseup事件中,其event事件存在一个button属性,其值有:“0”,“1”,“2”。0代表按下了主鼠标,1代表按下了中间鼠标,2代表按下了次级鼠标。默认情况下主鼠标是左鼠标,次级鼠标是右鼠标。

    (IE8及其之前的版本也提供了button属性,但区别很大,使用时要特别注意兼容性)。

    7.更多的事件信息

    event.detail

    其中包含有一个数值,表示在给定位置上发生了多少次单击。从1开始计数。在此期间每触发一对mousedown与mouseup事件就加一,但是在mousedown与mouseup事件之间移动了鼠标位置的话,detail属性会被重置为0.

    8.滚轮事件

    mousewheel事件:event.wheelDelta

    DOMMouseScroll事件:event.detail

    见事件——鼠标滚轮事件。

    9.触摸设备

    ios与Android设备不支持鼠标。

    不支持dblclick事件。双击浏览器会放大。

    轻击可单击元素会触发mouseover事件。如果导致页面变化就不会有其他事件发生,但是如果没有导致页面变化,依次触发mousedown、mouseup、click事件。

    轻击不可单击元素不会触发任何事件。可单击元素指的是可产生默认操作的元素,例如链接,或者那些已经被指定了onclick事件处理程序的元素。

  • 相关阅读:
    数字排列问题
    【动态规划】合唱团
    【动态规划】多米诺骨
    【动态规划】抄近路
    【动态规划】拦截导弹
    【动态规划】能量项链
    【动态规划】skiing
    [原创]Devexpress XtraReports 系列 3 创建主从报表
    [原创]Devexpress XtraReports 系列 2 创建表格报表
    [原创]Devexpress XtraReports 系列 1 创建静态报表
  • 原文地址:https://www.cnblogs.com/Syinho/p/12255727.html
Copyright © 2020-2023  润新知