溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js中的e.preventDefault()怎么使用

發(fā)布時間：2023-04-20 17:27:41 來源：億速云 閱讀：139 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“js中的e.preventDefault()怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“js中的e.preventDefault()怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

問題：

為什么我在父組件上使用preventDefault()，阻止默認(rèn)事件會導(dǎo)致我的子組件的默認(rèn)事件失效？

分析：

首先，我們看官網(wǎng)對event.preventDefault()這一方法的解釋，在繁體中文版的MDN網(wǎng)站中，只是簡單的提到了取消事件的預(yù)設(shè)行為，而不影響事件的傳遞。如字面意思，很好理解。

而在簡體中文版的MDN網(wǎng)站中，對于此事件描述的文字對比繁體版較多

在這里提到一個詞，叫顯示處理，不是很能理解這個詞。繁體版與簡體版的比較對應(yīng)下來，也能夠說的過去，所以這里并不能解決我們的疑問，到底為什么在父元素上調(diào)用了這個方法阻止默認(rèn)事件，子元素的默認(rèn)事件也消失了？

持續(xù)跟進(jìn)：

翻遍了百度，我沒有找到有關(guān)于這個問題的解答，莫得辦法了，只有自己去試著找一些結(jié)論性的東西。

嘗試：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 300px;
            overflow: auto;
            width:200px;
            padding: 40px;
            margin: 0 auto;
            background: grey;
        }
        #gdfather{
            position: relative;
            height: 600px;
            overflow: auto;
            width:400px;
            margin: 40px;
            background: rgba(0, 255, 255, 0.219);
        }
        #father{
            position: absolute;
            top: 20px;
            height: 200px;
            overflow: auto;
            width: 600px;
            margin: 40px;
            background-color: rgba(128, 128, 128, 0.349);
        }
        #son{
            position: absolute;
            top: 20px;
            height: 1400px;
            width: 800px;
            margin: 40px;
            background-color: rgba(205, 92, 92, 0.26);
        }
        #box2{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height:200px;
            width: 200px;
            background-color: khaki;
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='gdfather'>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <p>祖先中的內(nèi)容</p>
            <div id='father'>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <p>父親中的內(nèi)容</p>
                <div id='son'>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                    <p>兒子中的內(nèi)容</p>
                </div>
            </div>
        </div>
    </div>
    <div id='box2'>
        <input id="ipt" type="text">
        <div id='inbox'>
            <input id='inIpt' type="text">
        </div>
    </div>
    <script>
        let gdfather=document.getElementById('gdfather')
        let father=document.getElementById('father')
        let son=document.getElementById('son')
        gdfather.addEventListener('touchmove',(e)=>{
            // console.log('gdfather')
            // e.preventDefault()
        })
        father.addEventListener('touchmove',(e)=>{
            // console.log('father')
            console.log(e.preventDefault.toString())
            console.log(e)
        })
        let box2=document.getElementById('box2')
        let inbox=document.getElementById('inbox')
        let ipt=document.getElementById('ipt')
        let inIpt=document.getElementById('inIpt')
        let events
        box2.addEventListener('keydown',(e)=>{
            // e.preventDefault()
            console.log(e===events)
        })
        ipt.addEventListener('keydown', (e)=>{
            console.log(e===events)
            console.log(JSON.stringify(e)===JSON.stringify(events))
            events=e
        })

        inIpt.addEventListener('keydown', (e)=>{
            // e.preventDefault()
            events.preventDefault()
            console.log(events)
        })
    </script>
</body>
</html>

e.preventDefault()與return false的區(qū)別

事件處理函數(shù)的返回值(return false)只對通過屬性注冊的處理函數(shù)才有意義；
也就是說如果我們不是通過addEventListener()函數(shù)來綁定事件的話，那么要禁止默認(rèn)事件的話，用的就是return false；

如果使用addEventListener()或者attachEvent()函數(shù)來綁定的話，就要使用e.preventDefault()方法或者設(shè)置事件對象的returnValue屬性來阻止默認(rèn)事件。

讀到這里，這篇“js中的e.preventDefault()怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手