swipe event cancels text selection

Question

JQM 1.4.5

I'm having trouble with the "swipe" event(s) implemented by JQuery Mobile. As a general rule, just listening to an event should not alter the user experience. By this rule, there would seem to be a bug in JQM & Chrome.

In firefox and IE, it works as expected, however in Chrome the mouse drag event seems to be terminated when the swipe event is triggered.

The following eg. is demonstrated in this jsfiddle

<input type="email" value="drag-select@this-text.com" />

<script>
$(document).ready(function() {
  $(document).on("swipe", function(evt) {
    console.log("swiped " + new Date().getTime());
  });

  console.log("ready");
});
</script>

if you drag your mouse over the text in the input in order to select it, only 2-5 characters can be selected.

Can anyone suggest a work around?

If you actiavte DevTools (F12) the issue disappears. Chrome 59.0.3071.115 — Omar, Jul 10 '17 at 09:19

score 0 · Answer 1 · answered Jul 10 '17 at 02:47

0

In your swipe handler, stop event propagation. This will make the swipe event the end of the event stack. Without this, swipe calls and then other events fire.

$(document).on("swipe", function(evt) {
   console.log("swiped " + new Date().getTime());
   evt.stopPropagation();
});

Doing this I was able to highlight the rest of the text.

Note that your swipe event will still fire but subsequent events will not. You may want to cancel only upon some condition.

There's also evt.preventDefault() which will do something similar. As the name indicates, it will prevent whatever the default behavior is. So if swiping left on the document acts as a "back" button by default (it does on my Android), but you want swiping left to not do so, you may want to preventDefault() as well.

answered Jul 10 '17 at 02:47

oooyaya

1,773
1
15
39

Yes I'm using chrome (not on mobile at the moment though). I updated the fiddle at https://jsfiddle.net/cudwLd4w/3/ – oooyaya Jul 10 '17 at 03:03
your fiddle still has the issue for me on `chrome Version 59.0.3071.115` `windows`. zero change in behaviour. – pstanton Jul 10 '17 at 03:06
Interesting. `Version 59.0.3071.115 (Official Build) (64-bit)` here (macOS). I did experience the issue on your fiddle though. – oooyaya Jul 10 '17 at 03:08
just out of interest, do you still get the problem if you comment out 'stopPropagation'? – pstanton Jul 10 '17 at 03:25

score 0 · Answer 2 · answered Apr 06 '21 at 17:10

The framework is checking the movement along the x-axis against its own custom scrollSupressionThreshold parameter. This parameter is meant to detect and suppress the default horizontal scroll (if there is any), thus allowing to trigger a custom swipe, swipeleft or swiperight event.

I am using something like this below to allow text selection and swipe:

$(document)
  .on('swiperight', function (e) {
    var allowSelection = e.target.type == 'text' || e.target.type == 'textarea';
    var swipeTransition = {transition: 'slide', reverse: true};
    if(!allowSelection && !e.target.disabled) {
      $.mobile.pageContainer.pagecontainer('change', '#pageId', swipeTransition);
     }
    }
  })
  .ready(function () {
    $("input[type='text'], textarea")
      .on('focus', function (e) {
        $.event.special.swipe.scrollSupressionThreshold = Infinity;
      })
      .on('blur', function (e) {
        $.event.special.swipe.scrollSupressionThreshold = 30;
      });
  });

If You have only vertical scrollbars, You can set this parameter just one time at JQM initialization.

A similar solution has been posted here: https://stackoverflow.com/a/58491004/4845566

swipe event cancels text selection

2 Answers2