当前位置：网站首页>Roller_ Block default behavior_ Zero roll event compatible

Roller_ Block default behavior_ Zero roll event compatible

2022-07-24 12:45:00 【Liang wha duck,】

List of articles

Wheel event
Default behavior
Roller event compatibility
Wheel event compatibility

Wheel event

onmousewheel Wheel event Firefox is not compatible

Compatible with Firefox ： DOMMouseScroll
although type Different , however DOMMouseScroll Out of commission DOM 0 Level binding

The rolling direction of the roller ：
Mainstream viewer ： e.wheelDelta Roll forward ：150 Multiple backward ：-150 Multiple
firefox ： e.detail Roll forward ：-3 Multiple backward ：3 Multiple

window.onload = function () {
            document.addEventListener("mousewheel", (e) => {
                e = e || window.event;
                e.preventDefault()   //  Blocking default behavior 

                console.log(e.wheelDelta);
            })
        }

Default behavior

Default behavior ： Scroll bar Right-click menu . Browser's own

When setting the page , Sometimes you need to scroll the contents of a certain area , When scrolling the contents of this area , Will not scroll the entire page . At this time, the default behavior should be prevented
Insert picture description here

e.preventDefault() : Blocking default behavior , Incompatible with lower version IE

e.returnValue = false; : Used in IE Block default behavior in

return false; : Blocking default behavior , stay DOM 0 Level events can be used
It can be written as an inline event ：

<html oncontextmenu= "return false">

Prevent chestnuts from popping up in the right-click menu ：

<script>
    window.onload = function () {
      /*
         Default behavior  ： Scroll bar   Right-click menu 

        e.preventDefault()  :  Blocking default behavior , Incompatible with lower version IE

        e.returnValue = false; :  Used in IE Block default behavior in 

        return false; :  Blocking default behavior , stay DOM 0 Level events can be used 

         It can be written as an inline event ： <html oncontextmenu= "return false">
      */

      document.oncontextmenu = function (e) {
        // e.preventDefault()
        // e.returnValue = false;
        e = e || window.event;
        e.returnValue = false;
      }
      //  Prevent the pop-up of the right-click menu 
    };
  </script>

<body style="height: 2000px">
  <div>123456</div>
</body>

Roller event compatibility

1、 Determine whether it is Firefox

	if (dom.DOMMouseScroll) { } 
    //  This judgment is wrong 
    //  Although Firefox supports this writing , But it does not support DOM 0 Level binding , This judgment is meaningless , Firefox won't recognize 
    //  Write like this, whether it's Firefox or not , All are undefined
    
    //  The default value of events supported but not available  null, The unsupported event type is undefined
    var type = "mousewheel";
    if (dom.onmousewheel === undefined) {
      type = "DOMMouseScroll";
    }

2、 Blocking default behavior , Set the uniform scroll direction

//  Blocking the default behavior should be triggered when the function executes , Do it in the event function 

        //  Real event function ？ ： Handle the properties and corresponding values of the event object of the function , And back to the user 
        //  Deal with the problem of roller direction 
        function typeFn(e) {
          /*
             Set the unified scroll direction to ： wheelDetail   Positive forward , Negative values are backward 
          */
          e = e || window.event;

          //  Handle the direction of the wheel event in the same way 
          //  Built in objects may not be extended , That is, attributes are only readable but not writable 、 Cannot be traversed 
          //  Then you can customize the attributes , Note the function of this custom attribute in front of the function 
          e.wheelDetail = e.wheelDelta / 150 || e.detail / -3;

        }

3、 Just use the wheel event , 90% need to prevent default behavior . There is a compatibility problem preventing default behavior , So it can't be used directly e
Then you can provide the third parameter , To set whether to block the default behavior
true prevent , false Do not block

if (!!bool) { //  Turn around , More reliable , You can write directly 
            //  Blocking default behavior 
            if (e.preventDefault) {
              e.preventDefault();
            }
            else {
              e.returnValue = false;

            }
          }

4、 Set the callback function this Point to

		  //cb(); //  here cb Self execution , When calling mousewheel  Function time ,this Point to window
          //cb.call(this); //  here this  Point to dom
          cb.call(this, e); // e Is the first formal parameter of the callback function

5、 Set the compatibility of listening events , Judgment is not IE browser

//  After the above code , Here we are type It must be the name of the current wheel event 
        // IE I won't support it addEventListener
        //  Judgment is not IE
        if (dom.addEventListener) {
          dom.addEventListener(type, typeFn);
        }else {
          dom.attachEvent("on"+type, typeFn);
        }
      }

Wheel event compatibility

Encapsulate as a function , Make one js file , After that, you need to call

// dom  Is the box name of the area to scroll 
// cb  Callback function 
function mousewheel(dom, cb, bool) { 

    var type = "mousewheel";
    if (dom.onmousewheel === undefined) {
        type = "DOMMouseScroll";
    }
    function typeFn(e) {
        e = e || window.event;

        e.wheelDetail = e.wheelDelta / 150 || e.detail / -3;


        if (!!bool) { //  Turn around , More reliable , You can write directly 
            //  Blocking default behavior 
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;

            }
        }

        cb.call(this, e); // e Is the first formal parameter of the callback function 
    }
    if (dom.addEventListener) {
        dom.addEventListener(type, typeFn);
    }else {
        dom.attachEvent("on"+type, typeFn);
    }
}

原网站

版权声明
本文为[Liang wha duck,]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211806375021.html