阻止子元素继承父元素点击事件

问题描述

用户登录输入对话框，有记录最近的登录用户名，当输入框获取焦点时，弹出历史用户名的下拉框。

但是，有个问题：如果是选择下拉列表的值，下拉框隐藏；不选择下拉列表的值或者输入其他用户名，则下拉列表不会隐藏。

解决思路

添加监听事件，输入字符或者检测到输入框的值有变化后，下拉列表隐藏，或者鼠标点击输入框之外的任何地方就隐藏下拉列表。

解决方法

为了避免输入框也接收到输入框之外(父元素)的点击事件，即父div点击事件不传播到子元素，所以输入框需要加上阻止事件冒泡代码。

<input type="text" name="userName" id="userName" onclick="stopBubble(this.id)">
...
<script type="text/javascript">
  function stopBubble(e){
    // 非 IE 浏览器
    if(e && e.stopPropagation) {
      e.stopPropagation();
      return;
    }
    // IE 浏览器
    window.event.cancelBubble = true;
  }
</script>	

---

来源：CSDN

作者：joexk

链接：https://blog.csdn.net/zhouxukun123/article/details/82914359