Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Thanked 0 Times in 0 Posts

    Help stopping tablets overiding mouse click

    Hi, I apologize my Javascript knowledge isn't great...

    Basically I have a bunch of hotspots on a map - here is what is supposed to happen.

    When on a computer -
    If you hover over the hotspot, some text shows.
    If you click the hotspot, you go straight to a URL.

    When on a a tablet/phone -
    If you touch the same hotspot some different text shows.
    You DO NOT get taken to the URL.

    The problem is when on a tablet and I touch a link I cannot seem to stop the url redirecting.

    I've tried preventDefault(); but I can't get it to stop the redirection on a smartphone.

    Here is the inline code I'm having trouble with. Any help would be amazing, thanks.

    <area shape="poly" href="javascript: void(0);" ontouchStart="preventDefault(); document.getElementById('results').innerHTML = '<p>tablet touched</p>';" onmouseover="document.getElementById('results').innerHTML = '<p>hovering</p>';" onmousedown="window.location='http://www.website.co.uk/';" />

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 557 Times in 554 Posts
    I'm guessing that a tablet does not have an "onmousedown" event. There's really no reason why it would, unless I guess if you connected a mouse to it. The touch equivalent would appear to be touchstart, which I see you are using already... do you need two separate events, one for the touchscreen, one for the desktop?

    I guess there must be a spec out there somewhere (and I bet each manufacturer/OS has its quirks). This article seems to have some useful info

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 589 Times in 570 Posts
    preventDefault() is not a global function, it is a method of the event object.

    i think webkit will let you away with arguments[0].preventDefault(), but you should use an external event either .ontouchstart=, or .addEventListener("touchstart" ...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts