Shulou(Shulou.com)06/01 Report--

Editor to share with you an example analysis of the introduction of mousewheel events and compatibility handling in vue. I hope you will gain something after reading this article. Let's discuss it together.

Introduction of mousewheel events and compatibility handling

During the implementation of the project, a mousewheel event needs to be added to a table table that already has a vertical scroll bar to facilitate viewing data; its implementation principle is similar to the drag event in my last blog, which is realized by using the same scroll bar simulated

The main point of the scroll bar setting is

1. The height ratio of the scroll bar to the rolling slot should be equal to the height ratio of the content area (dynamic change) and the visible area; the rolling slot is flush with the visible area, and the height is the same; the height of the scroll bar is calculated according to the height of the content.

2. the positioning of each element adopts absolute positioning, and its parent element adopts relative positioning, so that the style can be well set.

After the layout and style is done, you only need to register the method in the component methods, call the method after the element is in place, and bind the table (mousewheel) event inside the method. Compatibility needs to be considered here. Firefox does not support the mousewheel event, its corresponding mouse scrolling event is the DOMMouseScroll event, and this event can only be added through the DOM2 level (addEventListener). And the way to judge the direction of mouse scrolling is also different. Firefoxt determines by the detail attribute that the attribute scrolls forward to-3 and backwards to + 3; other browsers use the wheelDelta attribute to forward multiple of + 120 and backward multiple of-120

For more information, please refer to the chapter "js Advanced programming events". Add functions as follows:

Scroll () {this.wrapDiv = document.getElementById ("wrap"); this.contentDiv = document.getElementById ("context-table"); this.contentDiv1 = document.getElementById ("context-table1"); this.sliderWrap = document.getElementById ("sliderWrap"); this.slider = document.getElementById ("slider"); / / set ratio let scale = this.wrapDiv.clientHeight / this.contentDiv.clientHeight; if (scale)

< 1) { this.mouseFlag = true; let h2 = this.sliderWrap.clientHeight * scale; h2 = (h2 < 50) ? 50 : h2; this.slider.style.height = h2 + "px";/*滚动条高度动态变化*/ let y = 0; let that = this; //为firefox添加滚轮事件 if (document.addEventListener){ document.addEventListener('DOMMouseScroll',function (e) { if(that.mouseFlag){ //console.log('scroll'); let event1 = window.event|| e; y = (event1.detail >

0)? Y + 8: y-8; y = (y)

< 0) ? 0 : y; let max = that.sliderWrap.clientHeight - that.slider.clientHeight; y = (y >

Max + 1)? Max + 1: y; that.slider.style.top = y + "px"; scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight; let y1 =-y / scale; that.contentDiv.style.top = y1 + "px"; that.contentDiv1.style.top = y1 + "px" }, false)} this.wrapDiv.onmousewheel = function (e) {if (scale)

< 1) { let event1 = window.event || e; y = (event1.wheelDelta < 0) ? y + 8 : y - 8; y = (y < 0) ? 0 : y;/*限定滚动范围*/ let max = that.sliderWrap.clientHeight - that.slider.clientHeight; //console.log(scale, y, sliderWrap.clientHeight, slider.clientHeight); y = (y >

Max + 1)? Max + 1: y; that.slider.style.top = y + "px"; scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight; let y1 =-y / scale; that.contentDiv.style.top = y1 + "px"; that.contentDiv1.style.top = y1 + "px" } else {/ * remove bound events and scroll bars when the height of the content area is less than or equal to the visual area * / this.wrapDiv.onmousewheel = null; if (document.addEventListener) {this.mouseFlag = false;} this.sliderWrap.style.visibility = 'hidden'; let height = this.contentDiv.clientHeight TableRight.style.height = height+72+'px'; this.wrapDiv.style.height = height+2+'px';}}

This function encountered a problem when unbinding the firefox binding event, because removeEventListener () needs to be unbound through a handle, and addEventListener () adding a handler through the handle will lead to the problem that the event parameter cannot be passed; even if an empty handler is bound to document when it needs to be unbound, it cannot overwrite the previous binding function; finally, we have to add a flag to change the value of the flag when the unbinding function is needed Determine whether to do an operation by judging the value of the flag in the binding function

The effect of mouse scrolling events can be well achieved in the above way, and there will be no compatibility problems.

Note: if you only bind a single scroll event to the table, you can not display or even set the scroll bar; the function of the scroll bar is only to indicate where the content area scrolls and to use it in conjunction with the drag event

Points to pay attention to about scroll and mousewheel events

The mouse wheel event of Firefox is DOMMouseScroll

Event parameter compatibility: e=window.event | | e; (omitted below)

The preventDefault () function cancels the default event and does not delete the event handling that we have added.

The experiment begins.

Based on the following verification example, there is no code interference between the experiments:

1. Output as is

Whether you manually pull the scroll bar or scroll the mouse wheel within the element,'d' cannot appear. When the element scrolls to the top or bottom, the output is'd', but there is no output of 'baked' at this time, indicating that the scroll event did not bubble in the first place. The scroll event of document is triggered by other factors.

two。 Cancel bubbling in the mousewheel event handling of element

E.stopPropagation ()

At this time, when you scroll the mouse wheel within the element,'c 'never appears, indicating that we have successfully stopped the bubbling of the mousewheel event. However, when the scroll bar reaches the bottom or top,'c 'still does not appear, but' d 'appears, indicating that the scroll event of document at this time is triggered by the mousewheel of element.

At this point, the question arises: does the mousewheel event of element handle this situation by default?

3. Cancel default handling in mousewheel event handling of element

E.preventDefault ()

At this time, when you scroll the mouse within the element, only'a 'and' c 'will appear, and the page will not scroll. Indicates that the effect of mouse wheel scrolling on element pages is handled by the mousewheel default event of element. At this time, pay attention to the number of'b 'output scrolled by the wheel in experiment 1, and you can probably guess the default processing process.

4. Add your own page scrolling in element's mousewheel (opposite to the default scrolling direction)

Element.scrollTop+=e.wheelDelta > 0,30PULLIZING / manually added page scrolling

When you scroll the mouse inside the element, you will find that even if you scroll to the top or bottom, the page outside the element will not scroll, and there is no output of 'dashes, which means that the scroll event of document is not triggered. The bad thing is that when you scroll to the bottom or top, if you continue to scroll the mouse, the element will still scroll, but first down and then up (or up and down).

5. Add your own page scrolling to the mousewheel of element (in the same direction as the default)

Element.scrollTop+=e.wheelDelta

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.