onclick and ontouchstart

  1. 6 months ago

    Hello,

    the following code (based on code from https://www.w3schools.com ) works all right on computers: users click a row in a listbox, and its related image shows up.
    But on iPads and similar touchscreen devices, when users tap a row in the box, nothing happens.

    So, in the snippet below, beside "onclick" I added also "onthouchstart", but pictures still do not show up.
    On the other end, tapping buttons (see button class="btnArrow" onclick, below) works OK.

    Googling around I got a tip about using event.stopPropagation();
    so I added it to the script below, but to no avail.

    Any suggestion how to solve the problem?
    Any recommendation appreciated. Thank you.

    <select size="25" id="mySelect">
     	 	<option class="btnreduced demo" onclick="currentDiv(1)" ontouchstart="currentDiv(1)" selected="selected">Pict 1</option>
     	 	<option class="btnreduced demo" onclick="currentDiv(2)" ontouchstart="currentDiv(2)">Pict 2</option>
                 ......
    </select>
    
    <button class="btnArrow" onclick="plusDivs(-1)">&#10094;</button>
    <button class="btnArrowR" onclick="plusDivs(1)">&#10095;</button>
    
    <div class="mySlides">
    	<img src="pct1.jpg" style="width:640px;height:440px;" alt="">
     </div>
      <div class="mySlides">
    	<img src="pct2.jpg" style="width:640px;height:440px;" alt="">
      </div>
    
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}    
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace("btnreducedclicked", "btnreducedvisited");
      }
      x[slideIndex-1].style.display = "block"; 
        dots[slideIndex-1].active = "true";
        dots[slideIndex-1].selected = "true";
        dots[slideIndex-1].className = "btnreducedclicked demo";
       // event.stopPropagation();
        
    }
    </script>
  2. Michel B

    May 8 Pre-Release Testers RubberViews.com

    From what I see on my own iPad is that both onClick and onTouchStart work just fine.

    So the issue would seem to be elsewhere in the code. The main difference between iOS and other browsers is that certain operations cannot take place if they are not in the event where the user tapped the device.

  3. I think the cause of issue is my using <select>; in fact, using <button> the issue disappears.
    Yet I use <select> because, since the number of items would overflow the screen-area, I though of keeping them in "listbox" of fixed height. But is seems I'll have to go back and use <button>.

    <select size="25" id="mySelect">
    <option class="btnreduced demo" onclick="currentDiv(1)" ontouchstart="currentDiv(1)" selected="selected">Pict 1</option>
    <option class="btnreduced demo" onclick="currentDiv(2)" ontouchstart="currentDiv(2)">Pict 2</option>
    ......
    </select>

    Thank you for answering.

or Sign Up to reply!