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

eventネイティブ JavaScript ソリューションの場合、イベントの伝播を防ぐために、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 に答える
1

関数をインラインで呼び出す代わりに、jquery を使用してこの問題を解決します。

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

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

のデモコードe.stopPropagation(): http://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 に答える