用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