I have the following web page where I added:
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
This keeps the page from moving but disables my ability to scroll through timepicker options.
I added the following to stop propagation but it doesn't see to work:
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('timepicker')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
<!DOCTYPE html>
<html >
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/header.css">
<link rel="icon" type="image/png" href="https://sailwbob.com/lagin/favicon.png">
<script src="https://sailwbob.com/lagin/public/js/header.js" type="text/javascript"></script>
</head>
<body>
<div class='container'>
<img id='swb' src="https://sailwbob.com/lagin/public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="https://sailwbob.com/lagin/public/images/img-1.png" alt="img-1">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-2.png" alt="img-2">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-3.png" alt="img-3">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-4.png" alt="img-4">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-5.png" alt="img-5">
<img class='rround small' src="https://sailwbob.com/lagin/public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:abc@gmail.com ?subject=Note to Skipper'; return false;">
<img src="https://sailwbob.com/lagin/public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5457">
<img src="https://sailwbob.com/lagin/public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/timepicker/jquery.timepicker133.min.css">
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery-3.6.0.js"></script>
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="https://sailwbob.com/lagin/public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('timepicker')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
</script>
</body>
</html>The way to fix this is to target the <ul> and not the <input>
<!DOCTYPE html>
<html >
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/header.css">
<link rel="icon" type="image/png" href="https://sailwbob.com/lagin/favicon.png">
<script src="https://sailwbob.com/lagin/public/js/header.js" type="text/javascript"></script>
</head>
<body>
<div class='container'>
<img id='swb' src="https://sailwbob.com/lagin/public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="https://sailwbob.com/lagin/public/images/img-1.png" alt="img-1">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-2.png" alt="img-2">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-3.png" alt="img-3">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-4.png" alt="img-4">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-5.png" alt="img-5">
<img class='rround small' src="https://sailwbob.com/lagin/public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:abc@gmail.com ?subject=Note to Skipper'; return false;">
<img src="https://sailwbob.com/lagin/public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5457">
<img src="https://sailwbob.com/lagin/public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/timepicker/jquery.timepicker133.min.css">
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery-3.6.0.js"></script>
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="https://sailwbob.com/lagin/public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
</script>
</body>
</html>