本文主要是介绍用stopPropagation()方法避免onblur与onclick冲突问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前一阵写一个项目要求是一个输入城市名称的input框，当用户点击输入框时热门城市的div浮出，里面有可选择的城市，用户可选择某个城市点击，点击完毕后div隐藏，那么它的城市名称将要显示到input框内。也可自己输入城市名称，输入完毕后，使input框失去焦点div隐藏。
- 一开始的思路
- 当input框获取焦点时div浮出
- 当input框失去焦点时div隐藏
- 当点击里面div块里的一个div块时，字div块的内容会显示到input框
- 方法
- onfocus（）
- onblur（）
- onclick（）
然而这样想法很正常但却出现了很多问题，其中最大的就是onclick与onblur处理冲突问题，因为在触发onclick时onblur也可以出发，js的单线程限制了只允许一个事件触发，onblur的优先性高于onclick，所以会先触发onblur即就是隐藏了浮动框。
后来对程序进行了改进
- 新的思路
- 事件触发全部换为onclick
- 当触发完input框的点击事件后，不管点哪里div都隐藏，即就是触发document.onclick事件
但这样也会出现问题，点击input框后div并没有出现，后来发现了stopPropagation()，这个方法。
简单介绍一下这个方法：就是触发这个元素的事件后，还会在dom树上找它的父节点，直到根结点一直执行这个事件。
所以在这个问题中，当input框获取点击事件后，它的父元素也会执行点击事件，而且刚好它的父元素是document刚好执行的是隐藏的效果，所以会出现点击没反应的情况。
代码如下：
var test = document.getElementById('test');var oDiv = document.getElementById('oDiv');test.onclick = function(event){oDiv.style.display = 'block';event.stopPropagation();document.onclick = function(){oDiv.style.display = 'none';alert(1);}}oDiv.onclick = function(){test.value = oDiv.innerHTML;}- test：输入框
- oDiv：浮出和隐藏的div
这篇关于用stopPropagation()方法避免onblur与onclick冲突问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
