What are the mouse event methods in jquery?

The mouse event methods in jquery are: 1. Click(), which can trigger the left mouse click event; 2. contextmenu(), which can trigger the right mouse click event; 3. dblclick(), Can trigger a mouse double-click event; 4. mousedown(), can trigger a mouse press event; 5. mouseup(), can trigger a mouse release event; 6. mousemove(), can trigger a mouse move event; 7. mouseenter(), Mouse move events can be triggered, etc.

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

JQuery mouse event organization

1. Click: left click, right click

.Click(): Click the left mouse button

Bind a handler to the JavaScript "click" event, or trigger the "click" event on the element. (Supports touch screen tab events)

.contextmenu(): When the mouse right-clicks the

right-click menu button, the right-click menu can be rejected.

2. Double-click

.dblclick(): Double-click trigger

3. Mouse pressed, mouse released

.mousedown(): Mouse pressed

.mouseup(): Mouse released

4. Mouse movement

. mousemove(): Mouse movement

5. Mouse entry, mouse movement out

.mouseenter(): Triggered when the mouse moves into an element.

.mouselevave(): Triggered when the mouse moves out of an element.

.mouseout(): Triggered when the mouse moves out of an element, and also triggered when the mouse moves in and out of its child elements.

.mouseover(): Triggered when the mouse moves into an element, and also when the mouse moves in and out of its child elements.

6. Mouse wheel scrolling

The built-in Jquery library does not support this. There are extension libraries that support wheel events.

7. Other jquery extended events

.hover(): Bind the mouseenter/mouselave event functions to the matching elements, respectively when the mouse pointer enters and Executed when leaving the element. Bind a single event function to the matching element to be executed when the mouse pointer enters and leaves the element.

.toggle() : Binds two or more handlers to matching elements to perform on alternate clicks.

Mouse event parameters

Event common parameters

• event.type: Get the type of event , the event type that triggers the element

• event.pageX and event.pageY: Get the current coordinates of the mouse relative to the page, and you can determine the element The coordinate value on the current page is based on the page as the reference point and does not change with the movement of the slider

• event.target: Get the trigger Event elements

The difference between this and event.target:

Events in js will bubble, so this is It can change, but event.target will not change. It will always be the target DOM element that directly accepts the event;

This and event.target are both DOM objects and can be converted into jquery objects: $(this) and $(event.target)

• event.which: Get the left, middle, and right buttons of the mouse in the mouse click event (left button 1, middle button 2, right button 3 ), the key code value of the keyboard in the keyboard event
• event.currentTarget: Gets the DOM object of the current triggered event before bubbling, which is equivalent to this
• event.preventDefault(): Prevent the default behavior. You can use event.isDefaultPrevented() to determine whether preventDefault has been called.
• event.stopPropagation(): Prevent events from occurring. Bubble, events can bubble. To prevent events from bubbling up the DOM tree and not triggering event processing functions on any predecessor elements, you can use event.isPropagationStopped() to determine whether stopPropagation has been called.

Example of JQuery mouse event

clickEvent: Mouse click event

<script>
    $('p').click(function(){
        alret('被点击一次')
    })
</script>

mousedownEvent: Mouse down event

<script>
    $('p').mousedown(function(){
        alret('鼠标按下一次')
    })
</script>

mouseenterEvent: Mouse enter event

<script>
    $('p').mousedown(function(){
        alret('鼠标进入一次')
    })
</script>

mouseleaveEvent: Mouse leave event

<script>
    $('p').mousedown(function(){
        alret('鼠标离开一次')
    })
</script>

mousemoveEvent: Mouse move event

<script>
    $('p').mousedown(function(){
        alret('鼠标移动了') // 注意这个事件是根据鼠标的位置发生变化，意思就是，你移动一次鼠标他就出触发一次
    })
</script>

mouseoutEvent: Mouse move event

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4"); // 注：鼠标移开用户指定的某个元素的时候会触发这个事件
});

mouseupEvent: Event when the left button is released after the mouse is pressed

$("p").mouseout(function(){
  alret('鼠标升起'); // 注：用户在点击完左键之后，松开左键会触发此事件
});

[Recommended learning: javascript video tutorial]

The above is the detailed content of What are the mouse event methods in jquery?. For more information, please follow other related articles on the PHP Chinese website!