Attaching Hammer.js 'hold' event to table row breaks text selection under IE 10

Question

I have discovered that some javascript code attached to a table row breaks text selection (mouse or keyboard) in a child text-box and it only seems to happen under IE (tested in v10 and v11). The latest chrome and firefox do not display the issue. It appears that simply attaching the event causes the problem and not the callback itself.

I have used JSFiddle to reproduce the problem: http://jsfiddle.net/7dQ66/5/

The HTML is this:

<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <td>Option</td><td>Job</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input/></td><td>Text</td>
        </tr>
    </tbody>
</table>

The javascript is this:

$(document).ready(function () {

        // Attach 'hold' touch event to each row in each subfile
        $("table tr").hammer().on("hold", function (event) {
            event.stopPropagation();
            event.preventDefault();

            alert('true');

            $(event.delegateTarget).addClass("row-active");
            $(event.delegateTarget).removeClass("ow-active");
        });
});

I am interested to know if anyone has solved this problem or perhaps there is a another way of applying Hammer.js to this 'table' so that the issue described does not occur.

Answer 1

I raised the issue against hammer.js on github in case it was a bug and got the answer I was looking for: https://github.com/EightMedia/hammer.js/issues/532

It turns out that hammer.js has a default option 'stop_browser_behavior.userSelect' which is set to 'none'. It's not clear why it only works for IE but it does state in the comments related to the default 'userSelect' value:

// this also triggers onselectstart=false for IE

and my guess is that this has something to-do with it.

Adding the following javascript at the start of my code resolves the issue:

Hammer.defaults.stop_browser_behavior.userSelect = '';