简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Do some events not support event bubbling?
ringa_lee
ringa_lee 2017-05-19 10:18:25
0
3
884

The above is a very simple test code
If onmouseover bubbles, the onclick event and onmouseout event should be triggered. However, it does not happen.
Clicking the onclik event does not trigger the onmouseout event either.
So what are the specific ones that are not supported? Bubbling events? 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                width: 100px;
                height: 100px;
                background: red;
                text-align: center;
                line-height: 100px;
                float: left;
            }
                
            p{
                width: 100px;
                height: 100px;
                background: blueviolet;
                text-align: center;
                line-height: 100px;
                float: left;
                display: none;
            }
            .dis{
                display: block;
            }
        </style>

    </head>
    <body>
        <p id="d">
        <span>
            点击
        </span>
        <p>浮动</p>
        </p>
    </body>
        <script>
            var d=document.getElementById('d')
            var s=document.getElementsByTagName('span')[0];
            var p=document.getElementsByTagName('p')[0];
            d.onclick=function(){
                console.log('123456789')
            }
            s.onmouseover=function(){
                p.style.display='block'; 
            }
            p.onmouseover=function(){
                p.style.display='block'; 
            }
            document.onmouseout=function(){
                p.style.display='none'; 
            }
        </script>    
</html>
ringa_lee
ringa_lee

ringa_lee

reply all(3)
洪涛
洪涛2017-05-19 10:20:25 3 floor

There may be something wrong with your understanding of the bubbling mechanism. Bubbling is the propagation of events between different levels. . .

Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-05-19 10:20:25 2 floor

For example, load, unload, blur, focus, mouseleave...
For details, please see the W3C document: Events whose Bubbles attribute is NO in the document do not support bubbling

Like +0
Add Reply
漂亮男人
漂亮男人2017-05-19 10:20:25 1 floor

Bubbling must also be the same type of event. For example, click can only trigger click.
The event triggering mechanism is different and it will definitely not spread

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！