Question

我有一个无法在平板电脑上运行的图像滑块，因为我在任何地方都使用了onclick。但是当我写道：

$('#myImageFlow').on("touchstart",".sliderImage", function(event){
    alert('i am on method '+event.type);
});

此行是我的滑块然后打印警报并且滑块有效，如果我尝试用以下代码替换警报：

console.log('on method ......'+event.type);

然后它无法正常工作。会出现什么问题？

HTML：

<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>iSlider</h1>




    <!-- This is all the XHTML ImageFlow needs -->
    <div id="myImageFlow" class="imageflow">

    <div id="id1" alt='div1'class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img1.jpg'); border:solid; border-color: black;">You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal,
    and the text will wrap. See the example below or follow along at home with the demo.You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal,
    and the text will wrap. See the example below or follow along at home with the demo.</div>
    <div id="id2" alt='div2' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img2.jpg'); border:solid; border-color: black;">this is 2</div>
    <div id="id3" alt='div3' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img3.jpg'); border:solid; border-color: black;">this is 3</div>
    <div id="id4" alt='div4' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img4.jpg'); border:solid; border-color: black;">this is 4</div>
    <div id="id5" alt='div5' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden; background-image:url('img/img5.jpg'); border:solid; border-color: black;">this is 5</div>
    <div id="id6" alt='div6' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 6</div>
    <div id="id7" alt='div7' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 7</div>
    <div id="id8" alt='div8' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img8.jpg'); border:solid; border-color: black;">this is 8</div>
    <div id="id9" alt='div9' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img9.jpg'); border:solid; border-color: black;"> this is 9</div> 
    <div id="id10" alt='div10' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img10.jpg'); border:solid; border-color: black;">this is 10</div>
    <div id="id11" alt='div11' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img11.jpg'); border:solid; border-color: black;">this is 11</div>
    <div id="id12" alt='div12' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 12</div>
    <div id="id13" alt='div13' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img13.jpg');border:solid; border-color: black;">this is 13</div>
    <div id="id14" alt='div14' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 14</div>
    <div id="id15" alt='div15' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 15</div>
    <div id="id16" alt='div16' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 16</div>



    </div>




</body>

Answer 1

使用vclick

$(document).on('vclick', '#myImageFlow', function () {
    // your scripts
});

Onclick无法在平板电脑上工作

1 个答案: