All geek questions in one place

JQuery multiple events

I know how to connect several events and all that. I want to do some events to call a function.

how

$ (this) .click and $ (this) .mousemove runs the function

Is there any way to do this? Is it possible or am I just dreaming.

+4
source share
5 answers

With the best of considerations, you can now make one bind and unbind different:

Example: http://jsfiddle.net/ZMeUv/

 $(myselector).mousedown( function() { $(document).mousemove(function() { // do something }); $(document).mouseup(function() { $(this).unbind(); // unbind events from document }); });

This prevents the mousemove from firing mousemove when you don’t need it.

+3
source

You can use jQuery special events to fully pack everything and optimize things in the process. The combination of mousedown and mousemove is also commonly called drag, so here is an example of creating a drag event that you can snap to elements. Please note that this code is specific to jQuery 1.4.2

One advantage of using this is that you only attach the mousemove , mouseout and mousedown handlers after each element, regardless of how many times this element is bound to the drag event. Now this is not the best way to do this, and you can configure only 3 document handlers and manage everything that is equally easily connected with the special events API. It just provides a well-packaged way to create complex interactions than is possible with just your own events or custom events in the jQuery sense.

 $("..").bind("drag", function() { ... });

I will try to add additional documentation about what is actually happening, as it looks rather unintuitive, I must admit. Make another nice article on this topic.

See an example of this here . To create this special event, use:

 jQuery.event.special.drag = { // invoked each time we bind drag to an element add: function(obj) { var originalHandler = obj.handler; obj.handler = function(event) { var el = jQuery(this); if(el.data('mousePressed')) { return originalHandler.apply(this, arguments); } }; }, // invoked only the first time drag is bound per element setup: function(data, namespaces) { var el = jQuery(this); el.data('mousePressed', false); el.bind('mousedown', function() { jQuery(this).data('mousePressed', true); }); jQuery(document).bind('mouseup', function() { el.data('mousePressed', false); }); el.bind('mousemove', jQuery.event.special.drag.handler); }, // invoked when all drag events are removed from element teardown: function(namespaces) { var el = jQuery(this); jQuery.removeData(this, 'mousePressed'); el.unbind('mousedown'); el.unbind('mouseup'); }, // our wrapper event is bound to "mousemove" and not "bind" // change event type, so all attached drag handlers are fired handler: function(event) { event.type = 'drag'; jQuery.event.handle.apply(this, arguments); } };
+3
source

Try something like this?

 var isDown = false; $(sel).mousedown(function() { isDown = true; }); $(sel).mouseup(function() { isDown = false; }); $(sel).mousemove(function() { if (isDown) { // Mouse is clicked and is moving. } });
+2
source

If I read your question correctly, you ask about the need to combine several events to run one function. It is possible to achieve these kinds of things, but I think that it will depend on specific events and the logic or inconsistency of their combination. For example, the mousemove event:

... runs whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated in a very small amount of time.

Contrast this with the mousedown event, which is - well, one per click. How to combine? The jQuery API says:

A common pattern is to bind the mousemove handler from within the mousedown hander [sic], and untie it from the corresponding mouseup handler. If you implement this sequence of events, remember that the mouseup event can be dispatched to a different HTML element than the mousemove event was. To account for this, mouseup should usually be associated with an element high in the DOM tree, such as <body> .

Perhaps another approach would be to create a primitive end state machine, to swallow various relevant events that you mean as input, updating your state accordingly, and then fire a custom event when the corresponding states are reached. It all smells a bit like reinventing the wheel, but perhaps your requirement is very specific or unusual.

Links: jQuery API: mousemove ()

0
source

Ok, thanks for your idea, Patrick. It reminded me of how I did something similar in Java.

var m_down = false; $ (this) .mousedown (function () {

  m_down = true;

});

$ (this) .mouseup (function () {

  m_down = false;

});

$ (this) .mousemove (function () {

  // Code to occur here

});

0
source

Source: https://habr.com/ru/post/1313461/

More articles:


All Articles