美文网首页
Laya:将当前节点的鼠标事件委托给舞台或者父节点

Laya:将当前节点的鼠标事件委托给舞台或者父节点

作者: 一眼就认出你 | 来源:发表于2019-06-03 16:27 被阅读0次

这样子做的原因:
将当前节点绑定鼠标的按下、移动、抬起事件,当鼠标移动出当前节点范围的时候,发现抬起事件和移动事件失效,所以才讲当前节点的鼠标事件委托给舞台或者父节点以扩大监听范围


代码实现如下:(语言:AS3)=>代码思路解释在文章末尾
当前节点的类

//引入父节点或父节点以上的类
import game.main.view.scene.MainTestView;
public class GridTestNode extends Sprite
{
      public function GridTestNode(){
            addEvent();
      }
      public function addEvent():void{
            this.on(Event.MOUSE_DOWN,this,onMouseDown);
     }
      private function onMouseDown(e:Event):void{   
           //讲当前节点对象传给父节点或父节点以上的类
            MainTestView.Instance.setMoveItem(this,true);
           //console.log("***按下");
      }
     //鼠标移动逻辑
     public function onDragPos(e:Event):void{
           // console.log("***移动");
     }|
     //鼠标抬起逻辑
     public function upMouse():void{
           // console.log("***抬起");
     }    
}

父节点或父节点以上的类

//导入子节点的类
import game.main.view.test.GridTestNode;
public class MainTestView{
     //当前可操作节点的对象
     private var _isMouseMove:Boolean;
     private var _moveItem:GridTestNode;
     public static var instance:MainTestView;
     public function MainTestView(){
        addEvent();
        _isMouseMove=false;
      }
     //单例模式
      static public function get Instance():MainTestView{
         if(instance == null){
               instance = new MainTestView();
         }
         return instance;
      }
     //设置可操作鼠标事件的当前节点对象
     public function setMoveItem(node:GridTestNode=null,isMouseMove:Boolean=false):void{
          this._moveItem=node;
          _isMouseMove=isMouseMove;
     }
     public function addEvent():void{
        Laya.stage.on(Event.MOUSE_MOVE,this,onMouseMove);
        Laya.stage.on(Event.MOUSE_UP,this,onMouseUp);
     }
     private function onMouseMove(e:Event):void{
          if(_isMouseMove){//可操作
                this._moveItem.onDragPos(e);
          }           
    }
    private function onMouseUp(e:Event):void{
          if(_isMouseMove){
              this._moveItem.upMouse();
               _isMouseMove=false;
           }            
     }
}

代码思路解释:

  • 当前节点绑定鼠标按下事件,并且将当前节点对象传给父节点对象;同时,写出鼠标的移动和抬起逻辑给父节点调用
  • 父节点类中,给舞台绑定(也可以给当前类绑定,视监听范围大小确定)鼠标的移动和抬起事件,当鼠标移动的时候,判断_isMouseMove类确定是否可操作,若可以操作则通过传过来的子节点对象来调用子节点定义的移动和抬起逻辑函数

注意:节点之间的相互引用,若有更好想法,记得留言分享哦

相关文章

  • Laya:将当前节点的鼠标事件委托给舞台或者父节点

    这样子做的原因:将当前节点绑定鼠标的按下、移动、抬起事件,当鼠标移动出当前节点范围的时候,发现抬起事件和移动事件失...

  • jquery的事件委托

    事件委托就是把子节点得事件放父节点上面处理。

  • 事件委托

    事件委托是通过事件冒泡的原理,利用父级给子级添加事件。事件委托的好处是不需要去遍历元素的子节点,只需要给父节点添加...

  • js事件代理机制

    JavaScript事件代理 当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父...

  • 事件代理

    JavaScript事件代理 当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父...

  • DOM事件委托

    什么是事件委托 由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数...

  • 使用原生 JS 实现事件委托

    事件委托是什么 把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统...

  • 前端(十七)

    事件冒泡 鼠标移入移出 input框事件 jQuery其他事件 绑定事件bind 自定义事件 事件委托 节点操作

  • stopPropagation, preventDefault

    e.stopPropagation() 阻止 js 事件冒泡。比如对于点击事件,点击当前节点之后,不会再触发父节点...

  • JS和JQuery中的事件委托

    什么是事件委托(事件代理) 事件委托通俗来讲就是利用冒泡的原理,把事件追加到父级,触发执行效果。比如当一个父节点下...

网友评论

      本文标题:Laya:将当前节点的鼠标事件委托给舞台或者父节点

      本文链接:https://www.haomeiwen.com/subject/mswcxctx.html