-webkit-app-region 无法鼠标事件

Question

一个node-webkit项目，顶部标题栏css样式设置为 -webkit-app-region：drag，就触发不了鼠标相关事件

Answer 1

我也遇到这个问题了,我是想做一个像迅雷下载速度一样的悬浮框,能拖,能点击,能右键

试了很多种方案都不完美..

最终找到一个方案..虽然比较麻烦,但是实现很完美

那就是不用 -webkit-app-region：drag

自己捕获鼠标事件,然后移动窗口

实现拖拽代码如下

    var win = nw.Window.get()

    let biasX=0
    let biasY=0

    document.addEventListener('mousedown',function(e){
        biasX=e.x
        biasY=e.y
        document.addEventListener('mousemove',moveEvent)
    })

    document.addEventListener('mouseup',function(){
        biasX=0
        biasY=0
        document.removeEventListener('mousemove',moveEvent)
    })

    function moveEvent(e){
        win.moveTo(e.screenX-biasX,e.screenY-biasY)
    }

click事件需要自己实现..不然拖动也会触发click

mousedown之后mouseup 判断鼠标移动距离.

小于多少就当click事件处理..大于多少距离就当移动..不触发click

Answer 2

-webkit-app-region: no-drag;

Answer 3

不要把drag加给整个body或者整个Header，加到具体的按钮上。

或者，加个全局的控制div来控制drag,然后在拖动完成或者不需要拖动的时候给display:none掉，在鼠标按下超过1秒不松开把那个drag给show出来。触发一下拖动

Answer 4

<div style="-webkit-app-region: drag">
<!--整体都可以拖拽 -->

<button style="-webkit-app-region: no-drag">
    <!--html代码 这里可以响应鼠标事件 -->
</button>

</div>

Answer 5

遇到这个问题又下面这个暂时性的解决方案

//html 部分
<div class="header">
  <div class="header-tit">这里可以拖拽</div>
  <div class="header-icon">
    <span id="x">x</span>
    <span class="m">[ ]</span>
  </div>
</div>

//css 部分
.header{
    position: relative;
    height: 30px;
    width: 100%;
    background: #000;
    color: #fff;
    line-height: 30px;
    text-align: center;
    -webkit-app-region: drag;
    overflow: hidden;
  }
.header-icon {
    position: absolute;
    right: 10px;
    top: 0;
    color: #fff;
    z-index: 99;
    -webkit-app-region: no-drag;
  }
  .header-icon span {
    margin: 0 10px;
    cursor: pointer;
  }

这样的话 header 是可以移动的，同时按钮也是可以点击的！

Answer 6

虾米音乐 解决了这个问题 还不清楚怎么实现的 看看源码