(JavaScript)event.stopPropagation()如何工作

时间:2015-08-31 16:19:44

标签: javascript

   $('input').click(function(){
        $('input').val('');
        event.stopPropagation();
        $(document).click(function(){
            $('input').val('naam'); 
        });
        
    });
input[value="naam"] {
    font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    color: gray;
    font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="Erk_Member">
            Naam:
            <input type="text" name="fname" value="naam" id="Name_Input">
        </form>   

正如你所看到的,我使用了event.stopPropagation()并且它完美地工作但是我可以粘贴它并让它留在那里而我不理解它或者我能理解它并且知道什么时候我可以再用一次。

所以我做了一些研究,在jQuery网站和w3schools上,我了解到它正在考虑jQuery,因为我认为我点击了输入而且还有他的父母。但我不知道它是如何使这个代码工作的。

有人可以用简单的方式向我解释这个

1 个答案:

答案 0 :(得分:0)

当您点击网页中的某些内容时,这就是一个事件。默认情况下,事件通过DOM树“向上”传播,直到它到达包含该特定事件类型的处理程序的DOM对象。

这意味着DOM结构中的事件可能存在MULTIPLE处理程序。例如考虑链接中按钮的情况:

<a href="gohere.php"><button onclick="dosomething()">click me</button></a>
<script>function dosomething() { alert('clicked!'); }</script>

在正常操作中,单击按钮将触发按钮的onclick处理程序并调用dosomething函数,然后您会收到警报。但该事件仍将“正在播放”,并向上涓流到包含/父<a>标记,并计入链接点击,导致浏览器开始加载gohere.php

.stopPropagation()可以阻止这种冒泡行为。从本质上讲,Gandalf将参加此次活动:“虽然不会通过”。如果dosomething()已转换为

function dosomething() {
   alert('clicked');
   event.stopPropagation();
}

按钮上的click将在该点停止,并且不再触发<a>标记。你会得到警报,别的什么都不会发生。