iT邦幫忙

0

JavaScript 基礎知識- 取消預設行為,了解元素所在位置

在某些情況下,我們會想取消元素的預設行為,例如 <a> 標籤的 href 屬性的這個行為,此時 .preventDefault()
就是一個非常好用的方法

<a class="menu" href="https://www.google.com" style="display: block;">Menu</a>

照著上面的結構會有一個 a 連結,連到 google 去,此時我想取消他這種預設的行為的話:

var el = document.querySelector('.menu');
el.addEventListener('click',function(e){
    e.preventDefault();
});

這個時候會發現無論怎麼點擊,都不會去到 google 了,因為 a 標籤的預設行為已經被我取消了

有時候我們也會想知道,我們目前點擊的元素位置或者元素是什麼,假設以下面的 HTML 結構:

<div class="header">
    <ul>
        <li>
            <a href=""#>123</a>
        </li>
    </ul>
</div>

如果我們綁定一個點擊事件:

var el = document.querySelector('.header');
el.addEventListener('click',function(){});

這時候我們可以對 function 內一樣帶 e 這個參數,指的是事件本身,使用 .target 這個方法,我們可以知道元素以及內容:

el.addEventListener('click',function(e){
    e.target
    // 我們可以在 console 查看自己點擊到的元素內容是什麼
    console.log(e.target);
});

不妨可以再多加一點 css 把距離推開來就能知道其差異性,除了 .target 這個方法,我們還可以更準確的知道節點的元素,這時候可以在後面多加 .nodeName :

el.addEventListener('click',function(e){
    console.log(e.target.nodeName);
});

這時候我們就能抓出節點的位置了,不妨試試看吧


尚未有邦友留言

立即登入留言