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

hping
  • 483

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

评论
阅读 4.5k
6 个回答

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

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

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

那就是不用 -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

-webkit-app-region: no-drag;

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

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

匆匆那年的美好
  • 2
新手上路,请多包涵

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

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

</div>

fanplus
  • 4
新手上路,请多包涵

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

//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 是可以移动的,同时按钮也是可以点击的!

图片描述

弦_Z
  • 1
新手上路,请多包涵

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

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏