將$（box）.bind（“ click touchstart”，function（）{添加到我的邏輯中，但在iPad上不成功

Question

我已在腳本中添加了'$（box）.bind（“ click touchstart”，function（）{'，但仍無法在iPad上運行。我正在嘗試使此腳本在所有設備上均可使用，以便用戶可以選擇框號1-8，並帶有邊框的建議將在下面顯示。您知道為什么在iPad上會出現這種情況嗎？

 var numbers = document.querySelectorAll(".clicked"); var letters = document.querySelectorAll(".border"); numbers.forEach(function(box, index) { $(box).bind("click touchstart", function() { letters.forEach(function(box) { box.classList.remove("showBorder"); }); var info = document.getElementsByClassName('box-tip')[0]; if (index > 2) { info.style.left = 11 + ((index - 3) * 45) + 'px'; } else { info.style.left = 0 + 'px'; } info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); }); $(document).on("click", '.clicked', function(){ $('.clicked').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .list-box {margin:15px auto;padding:0;} .box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} .box-sleeve {margin:15px auto;padding:0;} .showBorder { outline: 1px dashed #233354; outline-offset:1px;} .box-tip { display:inline; margin: auto; position: relative; visibility: hidden; padding-left:10px; } .numberCircle { border-radius: 90%; font-size: 12px; border: 2px solid #000; color: #fff; background: #000; padding: 0 4px; } .numberCircle span { text-align: center; display: block; } li.selected {color:#fff;background-color:#000;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>Test some logic one</span> <ul class="list-box"> <li class="clicked">1</li> <li class="clicked">2</li> <li class="clicked">3</li> <li class="clicked">4</li> <li class="clicked">5</li> <li class="clicked">6</li> <li class="clicked">7</li> <li class="clicked">8</li> </ul> <div> <span>Test some logic two</span> </div> <div class="box-tip"> <span>Regular length for your collar size</span> <span class="numberCircle">?</span> </div> <ul class="box-sleeve"> <li class="border">a</li> <li class="border">b</li> <li class="border">c</li> <li class="border">d</li> <li class="border">e</li> <li class="border">f</li> <li class="border">g</li> <li class="border">h</li> </ul> 

Answer 1

嘗試以下調整：

• 首先檢測並存儲用戶代理ua = navigator.userAgent;
• 然后將其與iPad匹配並將其存儲為event = (ua.match(/iPad/i)) ? "touchstart" : "click"; event = (ua.match(/iPad/i)) ? "touchstart" : "click"; 。
• 用作$(box).bind(event, function() { //do stuff }); 。

在iPad Air上工作。

 var numbers = document.querySelectorAll(".clicked"), letters = document.querySelectorAll(".border"), ua = navigator.userAgent, event = (ua.match(/iPad/i)) ? "touchstart" : "click"; numbers.forEach(function(box, index) { $(box).bind(event, function() { letters.forEach(function(box) { box.classList.remove("showBorder"); }); var info = document.getElementsByClassName('box-tip')[0]; if (index > 2) { info.style.left = 11 + ((index - 3) * 45) + 'px'; } else { info.style.left = 0 + 'px'; } info.style.visibility = 'visible'; letters[index].classList.add("showBorder"); }); $(document).on("click", '.clicked', function() { $('.clicked').removeClass('selected'); $(this).addClass('selected'); }); }); 

 .list-box li { display: inline-block; list-style-type: none; padding: 1em; background: red; } .list-box { margin: 15px auto; padding: 0; } .box-sleeve li { display: inline-block; list-style-type: none; padding: 1em; background: red; } .box-sleeve { margin: 15px auto; padding: 0; } .showBorder { outline: 1px dashed #233354; outline-offset: 1px; } .box-tip { display: inline; margin: auto; position: relative; visibility: hidden; padding-left: 10px; } .numberCircle { border-radius: 90%; font-size: 12px; border: 2px solid #000; color: #fff; background: #000; padding: 0 4px; } .numberCircle span { text-align: center; display: block; } li.selected { color: #fff; background-color: #000; } /* add these to prevent text move below 768 viewports */ @media (max-width: 768px) { .box-tip span { position: fixed; left: 10px; } .box-tip span.numberCircle { position: fixed; left: 236px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>Test some logic one</span> <ul class="list-box"> <li class="clicked">1</li> <li class="clicked">2</li> <li class="clicked">3</li> <li class="clicked">4</li> <li class="clicked">5</li> <li class="clicked">6</li> <li class="clicked">7</li> <li class="clicked">8</li> </ul> <div> <span>Test some logic two</span> </div> <div class="box-tip"> <span>Regular length for your collar size</span> <span class="numberCircle">?</span> </div> <ul class="box-sleeve"> <li class="border">a</li> <li class="border">b</li> <li class="border">c</li> <li class="border">d</li> <li class="border">e</li> <li class="border">f</li> <li class="border">g</li> <li class="border">h</li> </ul>