Get div to ignore everything but single clicks

Question

I have a map, which has about 3-5 divs on it. When someone clicks a div, it flips and a text appears on the back of the div. But if someone has the curser on a div and scrolls, the map should behave like it always does and zoom.

I found this in another question: http://jsfiddle.net/ZqfTX/. Is there a way to say

dblclick: function(){$(this).[IGNORE]} ?

My idea is only an idea. If you have another way to do it, even better.

I believe you can use something like jQuery('.whateverclass').bind('dblclick', function(e) { // whatever you need to do here }); and add 'whateverclass' to the div(s) in question. — Brian, Jun 27 '13 at 13:17
@KirKill That's just an example. But google maps reacts to double clicks by zooming. I want my divs to ignore dblclicks so the map zooms. — Timon, Jun 27 '13 at 13:17
So you do not want the double click to zoom, only mouse scroll? Would you also provide the current code if possible? — Brian, Jun 27 '13 at 13:21
@Brian I think I haven't been clear enough: The divs are on top/over (not sure what's the correct word) the map and have an opacity:0.5! Now I want my div to react to clicks but to ignore everything else, so the map in the background still behaves as usual. I want the map still to zoom when someone does a double click. Unfortunately I just have a map with some divs on it, yet. — Timon, Jun 27 '13 at 13:27
If you want the map to react to double clicks, it means that the div on it reacting to clicks will always trigger two times, is that your problem? — Samuel R, Jun 27 '13 at 13:32
@KirKill Well, right now the map doesn't react to anything because the div blocks it. In the end the div is supposed to ignore double clicks. — Timon, Jun 27 '13 at 16:27
@user2498308 see my update in the first answer. Doesn't handle double clicks though but I think maybe jQuery's bind/unbind or on/off might assist with that. — Brian, Jun 27 '13 at 16:57
@user2498308 have you been able to make any progress? And if my answer assisted you, please mark it answered to help other out. :) — Brian, Jun 27 '13 at 20:31
@KirKill take a look at my updated answer, I believe this should take care of what the original poster is trying to accomplish. Any thoughts/comments/suggestions? — Brian, Jun 28 '13 at 12:43
@Brian It looks pretty good, you just need to wait for the OP to know if that's what he wanted now — Samuel R, Jun 28 '13 at 12:48
@KirKill definitely, just wanted a second opinion. Never know though, you could have noticed something immediately and made it better :) thanks! — Brian, Jun 28 '13 at 12:50
@user2498308 awesome! Glad we could help. Good luck with the rest of your project. Happy coding :) — Brian, Jun 28 '13 at 14:11

score 1 · Accepted Answer · edited May 23 '17 at 12:21

This should take care of what you want. Here is an updated jsFiddle which sets a timeout and prevents a double click from occurring. You can set whatever amount of time you want before a second single click is allowed. It also detects the scroll of the mouse wheel and alerts up or down based on the direction of the scroll.

From your OP and comments, I believe this should accomplish everything you were asking. As far as the animation of your div, I don't know what you are doing with it so that part would need to be changed to do what you want.

The code snippet below was found and modified from this other SO post and many thanks to that poster: How to disable double clicks or timeout clicks with jQuery?

Preventing Double Click

jQuery('.flip').click(function() { 
    var $this = jQuery(this);
    if ($this.data('activated')) return false;  // Pending, return

    $this.data('activated', true);
    setTimeout(function() {
        $this.data('activated', false)
    }, 1500); // Time to wait until next click can occur

    doFlip(); // Call whatever function you want
    return false; 
});

function doFlip() {
    if ($('.flip').find('.card').hasClass('flipped')) {
        $('.flip').find('.card').removeClass('flipped');
    } else {
        $('.flip').find('.card').addClass('flipped');
    }
}

On a side note, if you do not want the user to have the ability to even single click the div a second time, take a look at jQuery's .one() event handler attachment as it only allows execution once per element. Not sure if you want to have the ability to click it a second time but figured I'd throw it out there just in case.

score 0 · Answer 2 · answered Jun 27 '13 at 14:01

0

If you want to prevent double click, you can try to use event.preventDefault

    $(".yourClass").dblclick(function (e) {
         e.preventDefault();
    });

answered Jun 27 '13 at 14:01

TFT

134
4

score 0 · Answer 3 · answered Jun 27 '13 at 15:47

0

Looks like you'll have to bind event handlers for the events you want to pass through to the map and perform the zooming actions manually. This might help: https://code.google.com/p/jquery-ui-map/

answered Jun 27 '13 at 15:47

ryanpf

136
5

Get div to ignore everything but single clicks

3 Answers3