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

Most people do not understand the knowledge points of this article "how to achieve the mouse button event in javascript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "javascript mouse button event judgment how to achieve" article.

The click event is triggered only when the main mouse button is clicked (or the keyboard enter key is pressed), so it is not necessary to detect the button's information. For mousedown and mouseup events, however, there is a button property in their event object that represents the button being pressed or released. The button property of DOM may have three values: 0 for the main mouse button, 1 for the middle mouse button (mouse wheel button), and 2 for the secondary mouse button. In normal settings, the main mouse button is the left mouse button and the secondary mouse button is the right mouse button.

The button property is also provided in IE8 and previous versions, but the value of this property is very different from the button property of DOM.

0: indicates that the button was not pressed.

1: indicates that the main mouse button is pressed.

2: indicates that the mouse button was pressed once.

3: indicates that the primary and secondary mouse buttons are pressed at the same time.

4: indicates that the middle mouse button is pressed.

5: indicates that the main mouse button and the middle mouse button are pressed at the same time.

6: indicates that the mouse button and the middle mouse button were pressed at the same time.

7: indicates that three mouse buttons are pressed at the same time.

It is not hard to imagine that the button property under the DOM model is simpler and more practical than the button property under the IE model, because it is rare to press multiple mouse buttons at the same time. The common practice is to standardize the IE model into the DOM way, after all, other browsers except IE8 and earlier versions natively support the DOM model. Mapping the primary, middle, and secondary buttons is not difficult, as long as you convert the other options of the IE to one of the three buttons (and make the main button the preferred object). In other words, the 5 and 7 returned in IE are converted to zeros in the DOM model.

Since capability testing alone cannot determine the difference (the two models have a button attribute of the same name), another approach must be found. We know that browsers that support DOM mouse events can be detected by the hasFearture () method, so you can add the following getButton () method to the EventUtil object.

Var EventUtil = {

/ / other codes have been omitted

GetButton: function (event) {

If (document.implementation.hasFeature ("MouseEvents", "2.0")) {

Return event.button

} else {

Switch (event.button) {

Case 0:

Case 1:

Case 3:

Case 5:

Case 7:

Return 0

Case 2:

Case 6:

Return 2

Case 4: return 1

}

}

}

/ / other codes have been omitted

}

By detecting the "MouseEvents" property, you can determine whether the button property that exists in the event object contains a correct value. If the test fails, indicating that it is IE, the corresponding values must be normalized. The following is an example of using this method.

Var div = document.getElementById ("myDiv")

EventUtil.addHandler (div, "mousedown", function (event) {

Event = EventUtil.getEvent (event)

Alert (EventUtil.getButton (event))

});

In this example, we add an onmousedown event handler for an element. When you press the mouse button on this element, a warning box displays the code of the button.

When using the onmouseup event handler, the value of button indicates which button is released. In addition, Opera does not trigger mouseup or mousedown events if the main mouse button is not pressed or released.

The above is about the content of this article on "how to judge how to realize the mouse button event in javascript". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

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.