stopPropagation cannot stop Hold Event

5 posts, 1 answers
  1. Bassanio
    Bassanio avatar
    11 posts
    Member since:
    Sep 2013

    Posted 11 Feb 2014 Link to this post

    I believe this does not happen only in ListView.

    I tried your demo http://demos.telerik.com/kendo-ui/mobile/listview/editing.html. The original effect is: 
    - swipe then Delete button appear
    - click the item other then Delete button will hide it but will not trigger the Tap event because it has e.event.stopPropagaton() in touchStart event.

    Okay, due to some reason I need to use Hold instead of Tap (i.e. Hold only, no Tap, so I am not talking about Tap triggered after Hold event problem)
    - swipe then Delete button appear
    - click the item other than Delete button. The Delete button goes away, but Hold event triggered!!
    You can reproduce it just change Tap to Hold.

    This means  e.event.stopPropagaton() cannot stop Hold timeout counting. Is there a way I can prevent this pending Hold event??
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 12 Feb 2014 Link to this post

    Hi Bassanio,

    You can use preventDefault() in order to prevent the hold event. Please check the following example:

    http://jsbin.com/xasuh/1/edit

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Bassanio
    Bassanio avatar
    11 posts
    Member since:
    Sep 2013

    Posted 12 Feb 2014 in reply to Kiril Nikolov Link to this post

    Thanks Kiril, but that's not a fix. However, the demo could demonstration the problem I mentioned:

          window.myTouch = {
            touchstart: function(e) { console.log("touch start"); this.events.cancel(); e.event.stopPropagation();},
            swipe: function(e) { console.log("swipe " + e.direction); },
            tap: function(e) { console.log("tap"); },
            doubletap: function(e) { console.log("double tap"); },
            hold: function(e) { console.log("hold tap"); e.preventDefault();}
          }

    Add the bold-faced codes and you will see .stopPropagation() in touchStart can block "tap" event triggering, but cannot block "hold" event.


  5. Bassanio
    Bassanio avatar
    11 posts
    Member since:
    Sep 2013

    Posted 12 Feb 2014 in reply to Bassanio Link to this post

    http://jsbin.com/roboj/2/edit

    According to some conditions in touchStart event, I need to block tap or hold event.
  6. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 17 Feb 2014 Link to this post

    Hi Bassanio,

    you have actually stumbled upon a bug in our implementation. Calling e.preventDefault in the touchstart handler should be enough to cancel both the tap and hold event handling. I am filing this issue in our bug tracker, and updating your telerik points for this finding. We are going to address it in one of our upcoming internal build releases.

    Meanwhile, you can work around this problem by calling some internal methods of the touch structure - please take a look at the updated version of the jsbin

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready