我在处理多个嵌套的 angularjs 鼠标按钮指令时遇到了一些麻烦。 我有一个如下所示的模板:
<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() 的作用是简单地检查按下了哪个鼠标按钮，然后对其进行处理。
我遇到的问题是，当在“工作区”(在我的 ProjectCtrl 模板内)上按下鼠标左键时，它会在“工作区”div 内放置一个 SVG 元素。此 SVG 元素与自定义 Angular Directive(指令)绑定(bind)，该指令在其模板上有一个 ng-click。
所以发生的事情是，我按计划创建了 SVG 元素，但是当我单击 SVG 元素的部分时，我想在范围内调用函数。它仍在调用 checkBtnDown()，因为新的 SVG 元素位于项目模板内。
如何让 SVG 元素 ng-click 来“浏览”而不同时触发 checkBtnDown()？
最佳答案
Hi, i don't know if you meaning this or not..hope this helps you.
in fact you just need to detect if your mouse clicked or not, for that we need to something to detect this for second time.
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>关于javascript - 在 Angularjs 中使用 "peek through"处理 neSTLed ng-click，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38024875/