Lightfooted Lightfooted - 5 months ago 17
AngularJS Question

Handle child's ng-click "peek through" in Angularjs

I'm having a bit of trouble handling multiple, nestled, angularjs mousebutton directives.
I have a template that looks like this:

<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>


What checkBtnDown() does, is simply check which of the mousebuttons was pressed and then processes it.

The problem I'm having is, when the left mousebutton is pushed down on the "workspace" (within my ProjectCtrl's template), it places a SVG element inside the "workspace" div. This SVG element is bound with an custom angular directive, which has a ng-click on it's template.

So what's happening is, I create the SVG element as planned but, when I click on the portion of the SVG element that I want to call a function on scope. It's still calling checkBtnDown(), because the new SVG element is inside the project template.

How can I get the SVG element ng-click to "peek through" and not fire checkBtnDown() simultaneously?

Answer

What I decided to do using your suggestion Mayer,

"In fact you just need to detect if your mouse clicked or not, for that we need to [do] something to detect this for second time."

was to measure the maximum time between the first and second mouse-events, then use a setTimeout().

Here's some pseudo-code to illustrate my idea.

// 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
    }
}