page is more than one screen long, and there are 10 buttons in the page, each bound to the touchstart event. Click the 10th button on the sliding page and find that some parts of the button cannot print log when clicked.
< H2 > try < / H2 >found that after removing the height:100% of container, you can click on it, but you don"t understand why. Can a css affect the result of the program?
< H2 > Code < / H2 >10</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
function init() {
$("-sharpbtn1").on("touchstart",function () {
console.log("btn1");
});
$("-sharpbtn2").on("touchstart",function () {
console.log("btn2");
});
$("-sharpbtn3").on("touchstart",function () {
console.log("btn3");
});
$("-sharpbtn4").on("touchstart",function () {
console.log("btn4");
});
$("-sharpbtn5").on("touchstart",function () {
console.log("btn5");
});
$("-sharpbtn6").on("touchstart",function () {
console.log("btn6");
});
$("-sharpbtn7").on("touchstart",function () {
console.log("btn7");
});
$("-sharpbtn8").on("touchstart",function () {
console.log("btn8");
});
$("-sharpbtn9").on("touchstart",function () {
console.log("btn9");
});
$("-sharpbtn10").on("touchstart",function () {
console.log("btn10");
});
};
init();
</script>
</body>
</html> 1. Using zepto.js
2. Open the phone mode of the browser to debug
3. Some areas of the button that are clicked are unresponsive, but not the whole button is unresponsive
4. This phenomenon occurs only after sliding the page