Rumah > hujung hadapan web > tutorial js > 如何实现Html事件冒泡

如何实现Html事件冒泡

一个新手
Lepaskan: 2017-10-12 10:33:17
asal
1776 orang telah melayarinya

原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的Demo,发现并不是想得那样。另外:event.stopPropagation()以及event.stopImmediatePropagation()并不能阻止span冒泡到a标签中,而简单粗暴的return false却可以。


<!DOCTYPE html>
<html>
<head>
    <title>Bubbling</title>
    <style type="text/css">
        * {
            font-size:30px;
        }
        div {
            border: 1px blue solid;
        }
        span {
            border: 1px blue solid;
        }
    </style>
    <script type="text/javascript">
        function setforeColor(sender) {
            sender.style.color = "red";
        }

        function setbgColor(sender) {
            sender.style.background = "green";
            return false;
        }
    </script>
</head>
<body>
    <div>
        <span onclick="setforeColor(this)">span tag</span> in div
    </div>
    <br>
    <div>
        <input type="button" value="Button" onclick="setforeColor(this)"/> in div
    </div>
    <br>
    <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
        <span onclick="setforeColor(this);return false">span tag</span> in anchor
    </a>
    <br>
    <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
        <span onclick="setbgColor(this)">span tag</span> in anchor
    </a>
</body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci 如何实现Html事件冒泡. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan