event.preventDefault() doesn't work on mobile

Question

I use charisma template to develop Web App. But, sub-menu can't open on mobile.

This is hmtl code:

<li class="accordion">
     <a href="#"><i class="icon-tasks"></i><span class="hidden-tablet"> Manage Task</span></a>
        <ul class="nav nav-pills nav-stacked">
            <li>
             <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Tasks', 'action' => 'index/1')); ?>"><i
                                            class="icon-list-alt"></i>
                <span class="hidden-tablet">My Assigned Tasks</span>
             </a>
             </li>
             <li>
             <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Tasks', 'action' => 'index/2')); ?>"><i
                                                class="icon-list-alt"></i>
               <span class="hidden-tablet">My All Tasks</span>
             </a>
              </li>

    <li>
         <a class="ajax-link" href="<?php echo $this->Html->url(array('controller' => 'Calendars', 'action' => 'index')); ?>"><i
                                            class="icon-list-alt"></i>
        <span class="hidden-tablet"> Assign Tasks</span>
        </a>
        </li>
</ul>

This is js code:

$('.accordion > a').click(function (e) {
        e.preventDefault();
        var $ul = $(this).siblings('ul');
        var $li = $(this).parent();
        if ($ul.is(':visible')) $li.removeClass('active');
        else                    $li.addClass('active');
        $ul.slideToggle();
    });

    $('.accordion li.active:first').parents('ul').slideDown();

I think e.preventDefault() doesn't work on mobile, so when click tag it's still render and dont show submenu.

Please help me resloved this problem. Thanks.

I know it isn't the "greatest" alternative, but have you tried `return false;` at the end of your bind? — Darren, Dec 10 '14 at 07:41
I mean to make your function something like this: `$('.accordion > a').click(function (e) { //.... all your code and stuff return false; }); ` — Darren, Dec 10 '14 at 07:49

score 2 · Answer 1 · answered Dec 10 '14 at 07:49

Try binding click and touchstart events together, like this:

$('selector').on('click touchstart', function(e)
{
     e.preventDefault();
});

Or you could implement a helper script, like Touche.js

Takes your click events applied with jQuery and silently re-maps them to the "touchend" event for devices that support touch.

score 0 · Answer 2 · answered Jan 26 '18 at 09:57

0

For me better solution is using click and tap events

    $('selector').on('click tap', function(e)
{
     e.preventDefault();
});

If You use touchstart, you can't scroll this links

answered Jan 26 '18 at 09:57

Andrew Kozoriz

111
3

event.preventDefault() doesn't work on mobile

2 Answers2