Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Button in Tappable ListItem issue



  • I have a Button in a tappable ListItem. How can I prevent the ListItem to “react” to touch when the Button is pressed? I’ve tried catching and calling preventDefault() and stopPropagation() on the events returned by onTouchTap and onMouseDown on the Button but without success… The ListItemstill reacts when pressing the Button.


  • Onsen UI

    @zabojad Try stopPropagation() with mousedown and touchstart events :+1:
    I think we will add some kind of prevent-tap attribute to fix this properly.

    var button = document.querySelector('ons-button');
    var prevent = function(event) { event.stopPropagation(); };
    button.addEventListener('mousedown', prevent);
    button.addEventListener('touchstart', prevent);
    


  • For anyone else wondering about the same thing => https://github.com/OnsenUI/OnsenUI/pull/2267