onclick and href doesn't work together on mobile device

Question

I use the the kendo ui splitview with two panes. This is what I tried:

<ul>
<li data-icon="net"><a id="clicker" onclick="testfunc()" href="#emptytestpage" data-target="main-pane">Empty </a></li>
</ul>

function testfunc(){


    alert("TEST");
}
</script>

This works great on google chrome with win7 or other desktop computers, but when i start it on a tablet with android or on a iphone it doesn't work. On mobile devices the onlick event doesn't work and i don't know why. How can i open a new page with href and start a function at the same time and why does it work on desktop and not with mobile devices?

Can someone help me please?

Answer 1

You should remove both inline onclick and ontouchend events. Then you may dynamically add event for click or touchend based on platform: mobile or desktop. I've made also a fiddle.

Something along these lines:

$(document).ready(function() {
    var clickHandler = function(e) {
            // Do other stuff on desktop;
            alert('desktop');
        },
        touchendHandler = function(e) {
            // Do other stuff on mobile;
            alert('mobile');
        },
        initClickOrTouchEventFor = function(elementSelector) {
            var el = $(elementSelector);

            // We're on mobile.
            if (mobilecheck()) {
                console.log('attaching touchend event on mobile');

                el.on('touchend', touchendHandler);
            }
            // We're on desktop.
            else {
                console.log('attaching click event on desktop');

                el.on('click', clickHandler);
            }
        };

    initClickOrTouchEventFor('#clicker');
});

Answer 2

I wouldn't put anything on the elements attributes, but set an event listener in jquery.

$("#clicker").on("click",function(evt){

    evt.stopPropagation();evt.preventDefault(); //Prevents the href

    //Do your thing

});

http://jsfiddle.net/uA8b6/ (Tested on an iPad Mini)