AngularJS - HREF NG-点击 - 事件冒泡 [英] AngularJS - href ng-click - event bubbling

问题描述

在下面的例子：

\r

\r

＆LT; D​​IV CLASS =子榜NG重复=项list.subItems＆GT;\r
  ＆LT;一类=榜单排的href =＃＆GT;\r
    ＆LT;跨度类=列表的单元格名称＆GT; item.name＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=名单细胞DT＆GT; item.dt＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=名单细胞摘要＆GT;\r
      ＆LT;跨度类=子列表项NG点击=page.updateSubStatus（项目）; $ event.stopPropagation（）;＆gt;点击＆LT; / SPAN＆GT;\r
    ＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=列表的小区列表行链接图标＆GT;＆LT; / SPAN＆GT;\r
  ＆所述; / A＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

当我在跨度HREF动作点击也援引由于事件冒泡。
我甚至用 $ event.stopPropagation ，但仍是问题仍然存在。

我无法删除＆LT的href; A＆GT; 标签，我需要在href操作为好。在需要导航到相应的URL，但是，跨度点击的项目点击点击，它需要调用我的控制器功能。

有人能帮助我如何处理在span标记的点击上面而不是在href事件。

工作示例：

\r

\r

＆LT; D​​IV CLASS =子榜NG重复=项list.subItems＆GT;\r
  ＆LT;一类=榜单排的href =＃＆GT;\r
    ＆LT;跨度类=列表的单元格名称＆GT; item.name＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=名单细胞DT＆GT; item.dt＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=名单细胞摘要＆GT;\r
      ＆LT;跨度类=子列表项NG点击=page.updateSubStatus（项目）; $事件preventDefault（）;＆gt;点击＆LT; / SPAN＆GT;\r
    ＆LT; / SPAN＆GT;\r
    ＆LT;跨度类=列表的小区列表行链接图标＆GT;＆LT; / SPAN＆GT;\r
  ＆所述; / A＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

要做到这一点，你必须使用角度和jQuery事件处理。请参见下面code片段。和工作 https://plnkr.co/edit/seF391qx3OcUubT8MeO7?p=$p$pview

\r

\r

VAR应用= angular.module（'对myApp'，[]）;\r
\r
app.controller（'demoController'，函数（$范围，$ anchorScroll）{\r
\r
  $ scope.list = {};\r
  $ scope.list.subItems = ['ITEM1'，'ITEM2'，'ITEM3'];\r
  $ scope.page = {};\r
  $ scope.page.updateSubStatus =功能（项目）{\r
    警报（项目）;\r
  }\r
}）\r
\r
$（文件）。就绪（函数（）{\r
  $（'一span.sub清单项目'）。在（'点击'，功能（事件）{\r
    的console.log（事件）\r
    。事件preventDefault（）;\r
  }）\r
}）

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=对myApp＆GT;\r
\r
  ＆LT; HEAD＆GT;\r
    ＆LT;间的charset =UTF-8/＆GT;\r
    ＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;\r
    ＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
    ＆所述;脚本数据需要=[e-mail] =的https：//$c$c.angularjs.org/1.4.9/angular.js数据semver =1.4.9＆GT ;＆LT; / SCRIPT＆GT;\r
    ＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js＆GT;＆下; /脚本＆GT;\r
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
  ＆LT; /头＆GT;\r
\r
  ＆LT;机身NG控制器=demoController＆GT;\r
  ＆LT; D​​IV CLASS =子榜NG-重复=，在list.subItems项目上完成渲染＆GT;\r
    ＆LT;一类=榜单排的href =www.google.com＆GT;\r
      ＆LT;跨度类=列表的单元格名称＆GT; item.name＆LT; / SPAN＆GT;\r
      ＆LT;跨度类=名单细胞DT＆GT; item.dt＆LT; / SPAN＆GT;\r
      ＆LT;跨度类=名单细胞摘要＆GT;\r
      ＆LT;跨度类=子列表项NG点击=page.updateSubStatus（项目）上点击=disableClick（）＆gt;点击＆LT; / SPAN＆GT;\r
      ＆LT; / SPAN＆GT;\r
      ＆LT;跨度类=列表的小区列表行链接图标＆GT;＆LT; / SPAN＆GT;\r
    ＆所述; / A＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r

\r

In the following example:

<div class="sub-list" ng-repeat="item in list.subItems">
  <a class="list-row" href="#">
    <span class="list-cell name">item.name</span>
    <span class="list-cell dt">item.dt</span>
    <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item); $event.stopPropagation();">Click</span>
    </span>
    <span class="list-cell list-row-link-icon"></span>
  </a>
</div>

When I click on the span href action is also invoked due to event bubbling. I even used $event.stopPropagation but still the problem persists.

I cannot remove href in <a> tag, I need the href operation as well. On click of the item it needs to navigate to respective url but on click of span "Click" it needs to invoke my controller function.

Can some one help me how to handle the click on span tag above but not the href event.

Working Sample:

<div class="sub-list" ng-repeat="item in list.subItems">
  <a class="list-row" href="#">
    <span class="list-cell name">item.name</span>
    <span class="list-cell dt">item.dt</span>
    <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item); $event.preventDefault();">Click</span>
    </span>
    <span class="list-cell list-row-link-icon"></span>
  </a>
</div>

解决方案

To do this you have to use Angular and jQuery event handling. See below code snippet. And working https://plnkr.co/edit/seF391qx3OcUubT8MeO7?p=preview

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

app.controller('demoController', function($scope, $anchorScroll) {

  $scope.list = {};
  $scope.list.subItems = ['item1', 'item2', 'item3'];
  $scope.page = {};
  $scope.page.updateSubStatus = function(item) {
    alert(item);
  }
})

$(document).ready(function(){
  $('a span.sub-list-item').on('click', function(event){
    console.log(event)
    event.preventDefault();
  })
})

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="demoController">
  <div class="sub-list" ng-repeat="item in list.subItems" on-finish-render>
    <a class="list-row" href="www.google.com" >
      <span class="list-cell name">item.name</span>
      <span class="list-cell dt">item.dt</span>
      <span class="list-cell summary">
      <span class="sub-list-item" ng-click="page.updateSubStatus(item)" on-click="disableClick()">Click</span>
      </span>
      <span class="list-cell list-row-link-icon"></span>
    </a>
  </div>
</body>

</html>

这篇关于AngularJS - HREF NG-点击 - 事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！