3

我有一段这样的代码。

// HTML file
<div class="box" ng-click="displayinfo()">
    click here to display info about this page.
    <div class="content" ng-click="displaytext()">
        Click here to display text.
    </div>
    click here to display info about this page.
</div>

// JS file
$scope.displayinfo = function()
{
    alert('info');
}
$scope.displaytext = function()
{
    alert('Text');
}

问题是在单击“单击此处显示文本”时，它正在调用这两个函数并显示“文本”和“信息”。但我不想在这里显示“信息”。我无法更改 html div 结构。

怎么做？

4

4 回答 4

2

它在文档中有点隐藏，但如果你看这里：http ://docs.angularjs.org/api/ng.directive:ngClick

你可以看到它提到了一个 $event 对象的参数。所以你的html会变成：

<div class="box" ng-click="displayinfo($event)">
    click here to display info about this page.
    <div class="content" ng-click="displaytext($event)">
        Click here to display text.
    </div>
    click here to display info about this page.
</div>

然后你的javascript会变成：

$scope.displayinfo = function($event)
{
    $event.stopPropagation();
    alert('info');
}
$scope.displaytext = function($event)
{
    $event.stopPropagation();
    alert('Text');
}

jsfiddle：http: //jsfiddle.net/rtCP3/32/

于 2012-12-23T20:47:39.607 回答
1

而是使用 jquery 在内联调用函数来解决这个问题：

$('.box').click(function(){
    displayinfo();
});

$('.content').click(function(e){
    e.stopPropagation(); //<-------------------this will stop the bubbling
    displaytext();
});

演示代码：http e.stopPropagation(): //jsfiddle.net/HpZMA/

var a = "text for info";
$('.box').click(function(){
    $(this).append(a)
});

var b = "text for info";
$('.content').click(function(e){
    e.stopPropagation(); //<-------------------this will stop the bubbling
    $(this).append(b)
});
于 2012-12-23T17:28:50.883 回答
1

对于本机 javascript 解决方案，您需要将event参数作为参数传递给您的 2 个方法，以防止事件传播

<div class="box" onclick="displayinfo(event)">

然后把js改成：

var displayinfo = function(event) {
    event.cancelBubble = true
    alert('info')
}

var displaytext = function(event) {
    event.cancelBubble = true
    alert('text')
}

演示：http: //jsfiddle.net/MvgTd/

于 2012-12-23T17:39:57.763 回答
1

无论你得到什么。stopPropagation(); 在你的情况下 

$event.stopPropagation();
于 2013-01-13T08:54:24.337 回答