项目场景：

提示：这里简述项目相关背景：

vue+electron使用嵌套el-dialog弹框，父元素el-dialog-header有drag拖拽事件，子元素鼠标事件不响应。

问题描述

提示：这里描述项目中遇到的问题：

例如：今天遇到一个问题，嵌套多个el-diaog，打开弹框放大到最大时自定义的最大化还原按钮鼠标箭头变成了默认的样式，并且点击事件不生效了，但是奇怪的是，el-dialog头部的关闭按钮却不受影响，可以正常点击。

@Override
	public void run() {
		bytes = mmInStream.read(buffer);
		mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
	}

原因分析：

例如：怀疑可能是是受父元素拖拽影响了子元素的点击事件，父元素如果有mousedown那么优先级是高于click事件的，后来，经查阅发现原来是-webkit-app-region: drag;这个属性造成的影响。然后，我在审查这个关闭按钮的元素发现了一个css属性-webkit-app-region: no-drag。

解决方案：

于是，将不需要拖拽的子元素加上这个css属性就可以解决。

    app-region: no-drag;
    -webkit-app-region: no-drag;

补充：

经过查阅-webkit-app-region这个属性，了解到今天的这个问题主要是由于-webkit-app-region: drag这个属性影响的。

资料：在web应用中特别是使用electron框架开发桌面应用时，可以通过设置-webkit-app-region: drag来实现窗口的拖动，但同时会阻止鼠标事件的发生，包括点击、双击等，所以为了避免子元素无法触发点击、双击等事件，可以在该元素内部加一个等宽等高的子元素并将子元素的-webkit-app-region设置为no-drag。这样，外部元素可以拖动，而内部元素仍然可以响应鼠标事件。