CSS

親要素をクリックしたつもりが子要素をクリックしてしまう時の解決方法

  /

こんにちは、ともです。

ブラウザで親要素をクリックした場合に子要素をクリックしてしまうという問題が発生しました。

この問題を解決する方法を残したいと思います。

問題のHTML

問題のHTMLはこちらです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">
        <i>hoge</i>
    </button>
</body>
<script>
    document.getElementById('btn').addEventListener('click', function(e) {
        console.log(e.target);
    })
</script>
</html>

クリックした結果は次のようになります。

buttonやiがイベントのターゲットになっていることが分かります。

解決方法

子要素のiタグを対象としたくない場合は次のようにcssで設定することが可能です。

<style>
        i {
            pointer-events: none;
        }
    </style>

これによりbuttonタグのみがターゲットとなるようになります。

以下はソース全体です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        i {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <button id="btn">
        <i>hoge</i>
    </button>
</body>
<script>
    document.getElementById('btn').addEventListener('click', function(e) {
        console.log(e.target);
    })
</script>
</html>

結果は次のようになります。

ボタンタグのみがクリックされるようになりました。