.click() event not working for mobile in Javascript

Question

I am having a problem with my code, I have a hidden a href link that the href value is added once a click is detected in a image and the link is pass as a value the the hidden href. So once it clicks on the image in Javascript I am making the manually .click() to the hidden href tag but it is not working in mobiles. My code is below:

processGridClick : function(obj){
        var objIndex = obj.getAttribute('data-item-number');
        var docType = obj.getAttribute('data-doc-type');

        if(obj.className.indexOf('single') > -1){
            var documentURL = "";
            var documentsJsonRoot = DocumentsMgr.documentationData.documents[objIndex];
            if(docType == 'reportsList'){
                documentURL = documentsJsonRoot.reportsList[0].url;
            }else if(docType == 'attachmentList'){
                documentURL = documentsJsonRoot.attachmentList[0].url;
            }
            dojo.attr('linkDocumentsSingle', "href", documentURL);

            document.getElementById('linkDocumentsSingle').click();
        }

    }

The view is a table that is generated in base of a JSON object and it can have more than one row, the value of the href is passed in base of the image that they clicked. This works good for desktop but in mobile the .click is not working, I even tried to add manually the touchstart event to all the clickable elements with the code below but stills not working.

    **(function(window){

    // check for touch
    if (Modernizr.touch) {

        // run the forEach on each figure element
        [].slice.call(document.querySelectorAll("figure")).forEach(function(el,i){

            // check if the user moves a finger
            var fingerMove = false;
            el.addEventListener("touchmove",function(e){
                e.stopPropagation();
                fingerMove = true;
            });

            // always reset fingerMove to false on touch start
            el.addEventListener("touchstart",function(e){
                e.stopPropagation();
                fingerMove = false;
            });

            // add hover class if figure touchend and fingerMove is false
            el.addEventListener("touchend",function(e){
                e.stopPropagation();
                if (fingerMove == false) {
                    classie.toggle(el,"hover");
                }
            });

        });

    }

})(window);**

score 0 · Answer 1 · answered Aug 26 '15 at 19:24

0

Will this work for mobile? Try simulating a mouse click...?

var ele = document.getElementById('linkDocumentsSingle');
ele.dispatchEvent(new MouseEvent('mousedown'));
ele.dispatchEvent(new MouseEvent('mouseup'));

answered Aug 26 '15 at 19:24

WhiteHat

59,912
7
51
133

1

Thanks, didn't think about the dispatchEvent manually, I just instead of mousedown and up I used touchstart, because my only problem is with mobile devices that is not working. Seems that for a href tags I needed to add manually the event. Thanks – Jorge Jacome Aug 26 '15 at 19:47

score 0 · Answer 2 · answered Aug 27 '15 at 09:50

Try to use this

In i phones there is a click event only for anchor tag or buttons. So for image, div or span you have to use tap event.

// listen for a touchstart event
$('img').on('touchstart.tap',function (e) {

  // listen for a touchend event
  $(e.target).one('touchend.tap',function() {
    $(e.target).trigger('tap');
  });

  // cancel it in 150ms
  setTimeout(function () {
    $(e.target).off('touchend.tap');
  },150);
});

This will trigger a tap event if a touchend follows a touchstart within 150ms (which you can adjust, of course). You could try using this in lieu of including jQuery mobile if a tap event is all you're after.

Note: For this i have examined you have included bootstrap js library

.click() event not working for mobile in Javascript

2 Answers2