Angularjsで "peek through"とng-clickを挟んで処理します

複数のnestled、angularjs mousebuttonディレクティブを処理するのに少し問題があります。私はこのようになりますテンプレートがあります。Angularjsで "peek through"とng-clickを挟んで処理します

<div class="project-wrap"> 
    <div class="workspace-wrap"> 
     <div id="workspace" class="workspace" 
      oncontextmenu="return false;" 
      ng-mousedown="project.checkBtnDown($event)" 
      ng-mouseup="project.checkBtnUp($event)" 
      ng-mousemove="project.mouseMoved($event)"> 
     </div> 
    </div> 

    <button class="logoutBtn" ng-click="project.logout()"> 
     Logout 
    </button> 
</div>

何checkBtnDownは、（）は、単純に押されたmousebuttonsのどのチェックし、それを処理しています。

左のマウスボタンを「ワークスペース」（ProjectCtrlのテンプレート内）にプッシュダウンすると、SVG要素が「ワークスペース」div内に配置されます。このSVG要素は、独自の角度指令にバインドされています。この指令は、そのテンプレートをクリックします。

私はSVG要素を計画どおりに作成しますが、SVG要素のうちスコープ上で関数を呼び出す部分をクリックすると発生します。新しいSVG要素がプロジェクトテンプレート内にあるので、依然としてcheckBtnDown（）が呼び出されています。

ng-clickで「peek through」を取得し、同時にcheckBtnDown（）を起動させないようにするにはどうすればよいですか？

出典

2016-06-25 Lightfooted

私はあなたの提案メイヤーを使用して行うことを決めた何

、

「実際にはあなただけの、そのために私たちが必要とする、あなたのマウスがクリックされたか否かを検出する必要がありますもう一度これを検出するために何かをする」

最初のマウスイベントと2番目のマウスイベントの間の最大時間を測定するには、setTimeout（）を使用します。

ここに私のアイデアを説明するための擬似コードがあります。

// First mouse-down event 

if (firstEvent) { 
    var timerID = setTimeout(function() { 
     // handle first mouse-event 
    }, dTimeBetween); 
} 

// Second mouse-down event 

if (secondEvent) { 
    clearTimeout(timerID); 
    function() { 
     // handle second mouse-event 
    } 
}

出典

2016-06-27 12:46:01 Lightfooted

私がこのようにしたのは、実行しない最初のたくさんのコード; child-directiveがng-click/ng-mousedownを起動したとき。だから私は子供の指示が実行する前に、2番目のng-clickまたはng-mousedownを呼び出すのを待つようにします。 – Lightfooted

これはかなりうまくいくようです。 – Lightfooted

私はそれを「ピークスルー」と呼びます。 – Lightfooted

こんにちは、あなたがこれを意味するのかどうかはわかりません。これがあなたに役立つことを願っています。

実際にマウスをクリックしたかどうかを検出する必要があります。これは、これを2回目に検出する必要があるためです。

 var app = angular.module("app", []); 
 

 
     app.controller("ctrl", function ($scope) { 
 

 
      $scope.alreadyClicked = false; 
 

 
      $scope.action = function() { 
 
       console.log("action"); 
 
      } 
 

 
      $scope.mousedown = function (event) { 
 
       if ($scope.alreadyClicked) { 
 
        $scope.action(); 
 
       } else { 
 
        console.log("mousedown"); 
 
        $scope.alreadyClicked = true; 
 
       } 
 
      } 
 

 
     });

 .box { 
 
      position: relative; 
 
      background: #eee; 
 
      border: solid 1px #ccc; 
 
      float: left; 
 
      width: 100px; 
 
      height: 100px; 
 
      cursor:pointer 
 
     }

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 

 
    <div class="box" ng-mousedown="mousedown($event)"> 
 
     {{alreadyClicked ? "click to call action":"click to call mousedown"}} 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
</body> 
 
</html>

出典

2016-06-25 04:57:49 Maher

ありがとうございます！私はそれを考えなかった。私はおそらくangularjsには、 "ピックスルー"に対応するための機能が組み込まれていると思った。入れ子にされたマウスイベントディレクティブを処理する良い方法はないと思いますか？ – Lightfooted

こんにちは、これを行う方法はありませんが、実際これは非常に非常にカスタムメソッドです:) – Maher

Angularjsで "peek through"とng-clickを挟んで処理します

答えて

関連する問題