0

I know that this may seem a weird thing to do, but I want to stop the click event from being executed and I want to do it from the mouseup.

Here's my testing code:

var $a = $('#link');
$a.mouseup(function(e){
    alert('mouseUp');
    e.stopPropagation();
    e.preventDefault();
    return false;
});
$a.click(function(e){
    alert('click');
});

(or jsFiddle version: http://jsfiddle.net/U3EWt/1/)

I'm doing it in my example on a regular browser with mouse events, but my ultimate goal is to achieve the same result with touch devices with touchend event instead of mouseup.

As you can see, I tried with stopPropagation(), preventDefault() and return false in the hope that the click wouldn't be triggered. But it's not working... Is there any way that I can block the event to continue to click() after the mouseup?

Thanks!

6
  • Why are you doing this? Surely you just don't write an event handler for the click event. Jan 31, 2012 at 16:10
  • When will you execute click then? Just remove the click handler if you don't need it. Jan 31, 2012 at 16:11
  • Like I said: my example uses the mouseup event but my goal is to do it with touchend on mobile devices (Android, iOS). The reason I have a click event is that because I use responsive design, I have only one website for mobile, tablets, browsers. On touch devices, there's a lag for the click to be triggered. That's what I want to avoid. The click is needed when the site is viewed in a browser and I want to trigger it earlier on the touchend event. But touchend, mouseup, it's the same problem. I figure that most people are on browsers so my example uses mouseup to make it easier for all. :)
    – Gabriel
    Jan 31, 2012 at 16:24
  • responsive design is cool - I'm into it as well :) Regarding your problem - why don't you just use a <div> instead of <a> (smth that's not clickable) and attach a click event yourself for the browsers. If it happens to be a mobile device - no event listener attached. Jan 31, 2012 at 16:42
  • @ZoltanToth: I'm also building websites with accessibility in mind, so I often have links that I'll manipulate using jQuery. But I still want the link to work if the user doesn't have working javascript... And replacing all links in the DOM to put div instead is unnecessary process. But thanks for the suggestion! :D
    – Gabriel
    Jan 31, 2012 at 17:46

2 Answers 2

1

Change mouseup to mousedown - http://jsfiddle.net/U3EWt/3/

$(document).ready(function(){
    var $a = $('#link');
    $a.mousedown(function(e){
        alert('mousedown');
        e.stopPropagation();
        e.preventDefault();
        return false;
    });
    $a.click(function(e){
       alert('click');
    });
});
1
  • If you look at my original question, I wrote that my goal was to do it on touchend on mobile devices. Using mousedown/touchstart is not an option because touchstart can be for dragging, swiping, tapping... it's impossible to know at that point...
    – Gabriel
    Jan 31, 2012 at 16:31
0

I didn't post my whole code in my question because I wanted to keep it simple and get directly to the problem but I understand that it resulted in something maybe a little confusing.

In the end, it looks like I can't simply block the click event from being triggered. But I can prevent any function attached to the element from being called simply by using unbind() or off() followed by a preventDefault() so the regular click behavior of the link will not be called. So here's my updated example:

var $a = $('#link');
$a.mouseup(function(e){
    alert('mouseup');
    $(this).off('click');
    $(this).on('click', function(e){
        e.preventDefault();
    });
});
$a.click(function(e){
   alert('click');
});

(jsFiddle: http://jsfiddle.net/U3EWt/7/)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.