HmmerJS - make mousedown consistent on browser and touch devices

Question

I'm using HammerJS to handle gestures. I have a div element (which hammer is managing events on) that contains a select within. In touch devices, or on device mode of the chrome development tools, I am able to open the select by just tapping and also moving the whole div by touching and panning, I can drag the whole thing even holding the select element. (this is my intended behavior).

On the other hand, when using a mouse. As soon as I click on the select, it opens. So, I'm not able to drag the element around.

In both devices, it seems the event reaches Hammer by bubbling, since it is waiting for them on the containing div. But the difference seems to be that clicking (tapping?) and dragging on touch device doesn't fire the mousedown event, only tapping does.

Would it be possible to have the browser behave like the touch device does, allowing me to drag my div by holding the select and still being able to have it unfold on click?

Is there any information on the event that could help differentiate between the two?

Am I looking at it sideways? I'm new to HammerJS.

What have I tried?

Listening for the mousedown event on the select, preventing the default behavior, letting the event bubble and trying to imperatively open the select on the tap event (eventmanager). But it seems one simply can not, at least, ~~the approach suggested here didn't work.~~

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

I was able to achieve the desired consistency by conditionally preventing the default behavior on the mousedown event, and letting it bubble up to the hammerJS Tap handler.

var someCondition = false;

function preventDefaultWithCondition (ev) {
    if (someCondition) {
        someCondition = false;
        ev.stopPropagation();
        return;
    }

    // Otherwise prevent the default behavior
    ev.preventDefault();
    this.blur();
    window.focus();
}

Then on the Tap event handler:

function onTap (ev) {
   if (ev.target.tagName === 'SELECT') {
      someCondition = true;
      /* Trigger the mousedown event programmatically on the select. */
   }
}

The technique I used to trigger the mousedown event is described here

The general idea is that the ultimate decision to whether open or not the select is ultimately delegated to HammerJS regardless of device.

HmmerJS - make mousedown consistent on browser and touch devices

1 Answers1