美文网首页
setCapture、releaseCapture、addEve

setCapture、releaseCapture、addEve

作者: z_j_r | 来源:发表于2017-11-08 18:36 被阅读0次

    前言:

    只要还有明天,今天就永远是起跑线

    --------------------------------正文---------------------------------

    setCapture可以将鼠标事件锁定指定的元素上,当元素捕获了鼠标事件后,该事件只能作用在当前元素上
    releaseCapture()可以为指定的元素解除事件锁定

    以下情况会导致事件锁定失败:
      1、当窗口失去焦点时,锁定的事件,自动就会取消
      2、alert也会导致事件的锁定取消。解决办法是在alert之后再次锁定
      3、鼠标右键也会导致事件解锁
    
    setCapture只可以作用于以下事件:
        onclick
        ondblclick
        onmousedown
        onmouseup
        onmouseover
        onmouseout
    

    setCapture不可作用于键盘等其它事件,只能作用于鼠标事件
    主要用于: onmouseover 与 onmouseout 事件。

    addEventListener() 方法用于向指定元素添加事件句柄

    EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的
    事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Document 本身,或者任何其他支持
    事件的对象 (比如 XMLHttpRequest)
    

    removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄
    通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除

    注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数

    格式
     addEventListener("事件名" , "事件处理函数" , "布尔值")
    
    注意:两个都要用时函数不能带参数,不然不能移除
     eg:
        document.body.addEventListener('touchmove',bodyScroll,false)
        document.body.removeEventListener('touchmove',bodyScroll,false)
    
    使用window.navigator.userAgent属性判断浏览器类型及版本

    滚轮封装

      //  添加事件监听
      function addEvent(obj,sEv,fn){
          // attachEvent——兼容:IE7、IE8;   不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
          // addEventListener——兼容:firefox、chrome、IE、safari、opera;   不兼容IE7、IE8
          if(obj.addEventListener){
              obj.addEventListener(sEv,fn,false);
          }else{
              obj.attachEvent('on'+sEv,fn);
          }
      }
      // 删除事件监听
      function removeEvent(obj,sEv,fn){
          if(obj.removeEventListener){
              obj.removeEventListener(sEv,fn,false);
          }else{
              obj.detachEvent('on'+sEv,fn);
          }
      }
      // 滚轮事件
      function addWheel(obj,fn){
          // 判断浏览器是否是Firefox
          // 使用window.navigator.userAgent属性判断浏览器类型及版本
          if(window.navigator.userAgent.indexOf('Firefox')!=-1){
              addEvent(obj,'DOMMouseScroll',fnWheel);
          }else{
              addEvent(obj,'mousewheel',fnWheel);
          }
          // 滚轮触发执行函数
          function fnWheel(ev){
              var oEvent = ev||event;
              // ture     下
              // false    上
              var bDir = true;
              // 判断滚动方向
              bDir = oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
    
              /* if(oEvent.wheelDelta){
                  //other
                  if(oEvent.wheelDelta<0){
                      bDir = true;
                  }else{
                      bDir = false;
                  }
              }else{
                  //firefox
                  if(oEvent.detail>0){
                      bDir = true;
                  }else{
                      bDir = false;
                  }
              } */
              // 执行回调函数
              fn&&fn(bDir);
              // 阻止默认事件          addEventListener没有return false
              ev.preventDefault&&ev.preventDefault();
              return false;
          }
      }
    

    相关文章

      网友评论

          本文标题:setCapture、releaseCapture、addEve

          本文链接:https://www.haomeiwen.com/subject/ibpymxtx.html