文章/答案/技术大牛

发布

社区首页 >问答首页 >如何停止touchmove事件的传播

问如何停止touchmove事件的传播
EN

Stack Overflow用户

提问于 2022-07-30 20:42:02

回答 1查看 76关注 0票数 0

我在以下网页中添加了以下内容：

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});
   }

<!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'>&nbsp;</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'>&nbsp;</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>

mobile

scroll

stoppropagation

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-30 22:09:44

解决这一问题的方法是针对对象而不是

<!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'>&nbsp;</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'>&nbsp;</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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73178922

复制

相似问题

问如何停止touchmove事件的传播
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止touchmove事件的传播EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止touchmove事件的传播
EN