当用户单击其子元素时,如何防止父级单击事件? AngularJS

2024-02-26

我有一个<div> with a ng-click但是这个<div> have a 子元素还有一个ng-click指示。 问题是子元素上的单击事件扳机also the 的点击事件 父元素.

当我点击他的孩子时,如何防止父点击事件?

这是一个jsfiddle http://jsfiddle.net/qu86oxzc/2/来说明我的情况。

预先感谢您的帮助。

EDIT

这是我的代码:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>

您应该使用 event.stopPropagation() 方法。 看:http://jsfiddle.net/qu86oxzc/3/ http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div>

$scope.childClick = function($event) {
    $event.stopPropagation();
    ...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当用户单击其子元素时,如何防止父级单击事件? AngularJS 的相关文章

  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • 浏览器视口大小(以设备像素为单位)

    Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度 以设备像素为单位 的准确信息初始化 调整大小或浏览器缩放事件时 规格 我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 在实体框架 6 中保存分离的实体

    我读过很多关于在实体框架中保存分离实体的帖子 所有这些似乎都适用于旧版本的实体框架 它们引用了诸如ApplyCurrentValues和ChangeObjectState之类的方法 但这些方法似乎并不存在 一时兴起 我决定尝试一种通过智能感
  • VS2008到VS2010项目转换

    我有一个在 VS2008 中构建的组件项目 目标是 NET Framework 3 5 我最近下载了 VS2010 Beta 1 以确保在切换到新 IDE 时该项目能够正确转换 该项目包含对几个针对该框架 2 0 版本构建的第三方 dll
  • 使用 URL 时找不到 Webpack 2 模块

    我刚刚更新了我的 Angular 2 项目以使用 Webpack 2 它运行得很好 然而 我在使用时遇到了一个新问题resolve alias key 当我使用 webpack 1 时 这段代码工作得很好 webpack config js
  • 我如何将 C++ 对象传递给具有不同 _ITERATOR_DEBUG_LEVEL 的 DLL

    我的可执行文件调用了许多我自己编写的 DLL 根据这些 DLL 使用的第 3 方 C 库 我无法自由选择所有 DLL 的编译器设置 因此在一些DLL中 ITERATOR DEBUG LEVEL设置为 2 调试版本中的默认值 但在我的可执行文
  • javascript setTimeout 调用错误

    我想调用window setTimeot https developer mozilla org en DOM window setTimeout功能与我的自定义范围 所以我使用call https developer mozilla or
  • R seq函数产生错误的结果[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 似乎我的一台机器为 seq 函数产生了错误的结果 而另一台机器或在线 r fiddle http www r fiddle org
  • ng-bootstrap 依赖项和警告

    我希望使用 ng bootstrap 文档要求安装 bootstrap CSS 作为依赖项 但不包括 jQuery 如果我使用 npm 安装 bootstrap 我会收到警告 它需要 jquery 和 popper npm i S boot
  • iPhone:本地化/国际化默认字符串文件

    我目前支持两种语言 英语和西班牙语 因此我有两个main strings每种语言的文件 一进en lproj和一在es lproj 我现在想要的是英语main strings如果用户的区域设置不是en or es到达应用程序 例如de or
  • python s3 boto connection.close 导致错误

    我有将文件写入 s3 的代码 代码运行良好 conn S3Connection AWS ACCESS KEY ID AWS SECRET ACCESS KEY bucket conn get bucket BUCKET validate F
  • git:如何在不签出的情况下推送?

    我有两台计算机 A 和 B 并使用 git 同步一些文件 例如 init el A 的存储库托管在 unfuddle 上 B 的存储库位于本地 A中的init el被修改并推送 B中的init el也被修改 问题是 如何将A的更改合并到B的
  • 绑定 Javascript 按键事件

    I have a need to monitor the state of the Shift key whether it is up or down Its purpose is to notify the user that whil
  • 使用 Excel VBA 将列数据向右移动

    下面是我的excel数据 A B c F G 1 test vb1 testing1 open 2 test1 vb2 testing1 close 2 test2 vb3 testing1 4 test3 vb4 testing1 我想将
  • 如何编写 kubernetes pod 配置来启动两个容器

    我想创建一个包含 2 个容器的 kubernetes pod 两个容器都有不同的镜像 这样我就可以一起启动这两个容器 目前我已经尝试过以下配置 id podId desiredState manifest version v1beta1 i
  • 等待 Ruby child pid 退出

    我正在尝试分叉一个子进程 等待它完成 如果它在一定时间内没有完成 则杀死它 这是我到目前为止所拥有的 servers each do server pid fork do puts Forking server output doing s
  • 使用 jQuery 获取 UL 第一个 LI 的 ID

    ul li List 1 li li List 2 li ul 也许我需要温习我的选择器 但是如何获取 ul someList 的第一个 ID 另外 如果我将 LI 添加到 ul someList 之前 我是否需要以不同的方式获取第一个 L
  • 如何使用 JQuery 获取特定 div 内的 img

    我必须获取特定 div 内的所有图像标签 id 我如何使用 JQuery 获得它 var arraysOfIds particularDivId img map function return this id get arraysOfIds
  • 更新 Node.js 后更新 PM2 的正确方法

    将 Node js 从 v10 16 更新到 v10 32 后 未检测到 PM2 但使用 ps aux 检查时运行良好 即使系统重新启动后 即使手动 PM2 命令导致以下类型的错误 PM2 也能正常运行 pm2 列表 pm2 未找到命令 将
  • Delphi中的浮点运算是确定性的吗?

    Delphi中的浮点运算是确定性的吗 IE 对于使用 Delphi Win32 编译器编译的同一个可执行文件进行相同的浮点数学运算 我是否会得到与使用 Win64 编译器 OS X 编译器 iOS 编译器或 Android 编译器相同的结果
  • Ckeditor.js:211 - 无法设置未定义的属性“dir”(仅一个用户发生问题)

    由于某种原因 此错误出现 但仅在一台计算机上出现 并且 CKeditor 不会加载 Cannot set property of dir undefined line 211 ckeditor js 我已经在我的计算机中测试了相同的设置 没
  • 当用户单击其子元素时,如何防止父级单击事件? AngularJS

    我有一个 div with a ng click但是这个 div have a 子元素还有一个ng click指示 问题是子元素上的单击事件扳机also the 的点击事件 父元素 当我点击他的孩子时 如何防止父点击事件 这是一个jsfid