Home >Web Front-end >JS Tutorial >jquery event mechanism extension plug-in jquery right mouse button event. _jquery

jquery event mechanism extension plug-in jquery right mouse button event. _jquery

WBOY
WBOYOriginal
2016-05-16 17:58:011133browse

In fact, jquery's own event mechanism is very complete, including click, double-click, mouse move in, mouse move out, etc. But there is one less thing to do. It's the right mouse click event. Of course, everyone also directly listens to the mouse press event, and then uses if to determine and execute the corresponding function. Causes the effect of a mouse right-click event.
But this is not what I want. What I want seems to be that this event can be the same as other events such as click events. It can be used conveniently without having to judge every time. Here, by writing a jquery plug-in, this method can be used directly using $().rightClick();.
jQuery plug-ins are mainly divided into 3 types
1. Plug-ins that encapsulate object methods
(This kind of plug-in encapsulates objects and is used to operate objects obtained through selectors, which is what is needed here Method used)
2. Plug-in that encapsulates global functions
(independent functions can be added to the jquery namespace)
3. Selector plug-in
(although jquery’s selector has been It’s very powerful, but you still need to expand some of your favorite selectors)
For other knowledge about plug-ins, you can check the relevant information yourself. Let’s start talking directly here.
This is the first plug-in type used. Let’s first analyze the specific writing ideas.
1. After using the right mouse button event, all system right-click menu functions will be disabled
2. After binding the right mouse button event, the mouse press event is actually triggered.
3. Judge through if. If the right button is pressed, the parameter will be executed. This parameter can only be a function. If it is not a right click, it will not be executed.
I believe that at this point, those who are familiar with jquery will understand how to do it.
jquery事件机制扩展,jquery鼠标右键事件。

jquery event mechanism extension, jquery right mouse button event.

Copy code The code is as follows:

/*right mouse button plug-in*/
(function ($) {
$.fn.extend({
//Define the right mouse button method and receive a function parameter
"rightClick":function(fn){
//After calling this method, Disable the system's right-click menu
$(document).bind('contextmenu',function(e){
return false;
});
//Bind the mouse press event for this object
$(this).mousedown(function(e){
//If the right button is pressed, execute the function
if(3 == e.which){
fn();
}
});
}
});
})(jQuery);

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn