zoukankan      html  css  js  c++  java
  • javascript事件相关2

      1 记录一下今天所学 javascript 事件相关的知识 
      2  鼠标 和 滚轮事件 在web开发当中 这也算是最常用的事件了吧!
      3 
      4  我们先来学习学习 鼠标事件,在dom3级中 为鼠标事件新增加了 9个事件,
      5  其中有6个事件在dom2级的时候 大多数浏览器就已经支持了 所以被加入到了 dom3级的规范当中来 
      6 
      7  1. click   事件, 鼠标单击最常用的事件之一了吧。
      8  2. dblclick事件, 鼠标双击
      9  3. mousedown事件,鼠标按下
     10  4. mouseup事件,  鼠标抬起
     11  5. mouseover事件, 鼠标移入
     12  6. mouseout事件,     鼠标移出
     13  7. mouusenter事件 (不会冒泡的事件),
     14  8. mouseleave事件 (不会冒泡的事件),
     15  9. mousemove事件     鼠标移动
     16 
     17  其中click事件是由   mousedown 和 mouseup 事件组合而成的。
     18  可以通过 阻止这两个事件 从而阻止 click事件的触发!
     19 
     20  可以通过检测 查看浏览器 是否支持上面的DOM2级鼠标事件
     21  var isSupported = document.implementation.hasFeature("MouseEvents", "2.0")
     22 
     23  可以通过检测 查看浏览器 是否支持上面的DOM3级鼠标事件
     24  var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
     25 
     26  还可以通过 事件对象的属性 判断鼠标触发点击事件的时候 相对于 屏幕, 浏览器窗口,和整个页面的(水平,垂直)偏移位置。
     27 
     28  1. 相对于浏览器视口的(水平,垂直)偏移位置 所有浏览器都支持
     29 
     30  var x = clientX;
     31  var y = clientY;
     32 
     33  2. 相对于页面的(水平,垂直)偏移位置 ieee,7,8不支持 其他浏览器都支持
     34 
     35  var x = pageX;
     36  var y = pageY;
     37 
     38  3. 相对于屏幕(水平,垂直)偏移的位置
     39 
     40  var x = scrollX;
     41  var y = scrollY;
     42 
     43  ie6,78 可以通过下面的计算来 得出相对于页面的(水平,垂直)偏移位置
     44 
     45  var x = clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
     46  var y = clientY + (document.body.scrollTop || document.documentElement.scrollTop);
     47 
     48  可以写成一个兼容函数
     49  DOM鼠标事件支持 
     50  altKey, ctrlKey, shiftKey, meatKey是否为 true来判断 是否在键盘上按下了这些键
     51 
     52  IE鼠标事件支持
     53  altLeft, ctrlLeft, shiftLeft 是否为 true来判断 是否在键盘上按下了这些键
     54 
     55  当触发 mouseover和mouseout这两个事件时 有可能会关联到别的元素,DOM事件的事件也提供了相关的属性来指向 相关的元素
     56  而 IE 也有不同的事件对象的属性来表示相关的元素
     57 
     58  DOM事件对象的属性为:
     59  event.relateTarget.
     60 
     61  IE事件对象的属性为:
     62  toElement, fromElement
     63 
     64  可以写成一个兼容函数。
     65 
     66 鼠标按钮:
     67 一个鼠标上面 有左键(主键),右键,中间的滚轮。
     68 我们要判断当属变按下的时候 是按下了三个键中的哪一个?在事件对象里面 也有相应的属性提供 
     69 
     70 DOM事件对象中是:
     71 event.button
     72 
     73 当值为 0 时 说明按下了 左键
     74 当值为 1 时 说明按下了 中间的滚轮键
     75 当值为 2 时 说明按下了 右键
     76 
     77 IE事件对象中也是:
     78 event.button
     79 
     80 当值为 1 时 说明按下了 左键
     81 当值为 4 时 说明按下了 中间的滚轮键
     82 当值为 2 时 说明按下了 右键
     83 
     84 可以写成一个兼容函数。
     85 
     86 鼠标滚轮事件:
     87 mousewheel事件 除了火狐意外的浏览器都支持 包括ie6,7,8 88 此事件 可以定义在任何元素上 都会冒泡到document(ie8)上 或者 window对象(ie9)上。
     89 
     90 通过判断 event.wheelDelta 的数值得正负 来判断是向前滚动 还是 向后滚动。
     91 正 是代表向前
     92 负 是代表向后
     93 
     94 注意 在oprea9.5版本以前 刚好相反
     95 正 是代表向后
     96 负 是代表向前 
     97 所以 这里可以通过浏览器判断一下版本号 给结果取反 就OK了
     98 
     99 而火狐了 
    100 支持鼠标滚轮事件的事件是:
    101 DOMMouseScroll
    102 
    103 它通过event.detail 的数值得正负 来判断是向前滚动 还是 向后滚动。
    104 正 是代表向后
    105 负 是代表向前 
    106 
    107 所以这里也可以 集合前面的结果来 写成一个兼容的函数。
    108 由于时间太晚了 具体代码就不再这里写了。
    109 布丁-阿_____________________ 晚安 !!!
  • 相关阅读:
    如何制作URL文件
    对象映射工具AutoMapper介绍
    C#高阶函数介绍
    System.Web.Caching.Cache
    系统架构设计:进程缓存和缓存服务,如何抉择?
    System.Web.Caching.Cache类 缓存 各种缓存依赖
    max server memory (MB)最大服务器内存配置--缓解内存压力
    第0节:.Net版基于WebSocket的聊天室样例
    第六节:Core SignalR中的重连机制和心跳监测机制详解
    第五节:SignalR完结篇之依赖注入和分布式部署
  • 原文地址:https://www.cnblogs.com/hfdj/p/7653629.html
Copyright © 2011-2022 走看看