Backbone View 事件获得正确的目标

2023-12-28

给出以下简单的 html:

<div class="someContainer">
  <h5>Some other information</h5>
</div>

以及以下主干视图:

var view = Backbone.View.extend({
  events: {
   'click .someContainer': performAction
  },
  performAction: function (evt) { 
    // Do things here
  } 
});

我发现自己经常执行以下代码,这对我来说似乎有点代码味道。我做错了什么或者有更好的方法吗?

...performAction: function (evt) { 
 // Check to see if the evt.target that was clicked is the container and not the h5 (child)

 if ($(evt.target).hasClass('someContainer')) { 
  // Everything is ok, the evt.target is the container
 } else { 
  // the evt.target is NOT the container but the child element so...
  var $container = $(evt.target).parent('.someContainer');

  // At this point I now have the correct element I am looking for
 }
}

显然,这是可行的,但我不确定这是否是适合在任何地方编写的好代码。我可以创建一个可以直接调用的方法,但我不确定是否真的可以纠正代码味道,它只是将其外包到其他地方。


你可以使用evt.currentTarget http://api.jquery.com/event.currentTarget/反而:

事件冒泡阶段中的当前 DOM 元素。

Demo: http://jsfiddle.net/ambiguously/UgA5M/ http://jsfiddle.net/ambiguous/UgA5M/

或者你可以使用$container = $(evt.target).closest('.someContainer')不用担心嵌套。

Demo: http://jsfiddle.net/ambiguously/B49LG/ http://jsfiddle.net/ambiguous/B49LG/

您使用哪种方法取决于您的具体情况。如果您在某种控件上有一个单击处理程序,那么closest可能更有意义;如果您确实想要将点击处理程序绑定到的元素(或者认为您拥有,这一切都是基于delegate https://stackoverflow.com/a/7802255/479863毕竟),然后使用currentTarget.

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

Backbone View 事件获得正确的目标 的相关文章

  • 防止页面跳转到iframe

    我正在尝试通过 iframe 将 wetransfer 集成到网站中 但是当页面加载时遇到问题 它会跳转到页面的一半 因此它专注于 iframe 而不是在页面顶部打开 据我所知 wetransfer 网站上有一个脚本告诉它跳转到该部分 而不
  • 使用智能菜单jquery打印json

    menu name Computers children name Notebook children name Apple name Windows name Tablets children name Apple name Androi
  • ScrollTop 在 Chrome/Safari 中不起作用

    我的网站上有一个循环内的表单 当有人提交表单时 查询字符串会添加到 URL 中 例如 updated 111 然后 我的 JQuery 脚本检查数字的 url 并在提交表单并重新加载页面后滚动到该 div 该脚本在 Firefox 中运行良
  • 获取插入符位置上的当前单词

    如何通过当前插入符号位置获取 textarrea 中的单词 我尝试了类似的操作 但是这仅返回单词的第一个字母到插入符号位置的字符 例如 如果光标位于fo and o它返回fo并不是foo正如预期的那样 Fo o bar 不等于 bar fo
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 如何防止默认事件触发但仍允许事件冒泡

    使用 jQuery 使用以下代码 我想防止 href url 在本例中为哈希 在单击时触发 但仍然允许单击事件继续在链上冒泡 请问如何实现这一点 div a href Test a div a click function e stop a
  • 上传前如何检查图片的宽度和高度

    对于图片上传 我编写了以下 html 代码
  • jQuery 如何通过不同的列值计算表中的行数

    如何按表列计算不同的表行 Example table thead tr th NAME th th TECHNOLOGY th tr thead tbody tr td john td td jQuery td tr tr td mark
  • jQuery Draggable:可拖动框越过容器 - bug?

    Try this http jsfiddle net QhVNr code HTML div class draggable container div class draggable div class exp div div div C
  • 如何应用 EXIF 定位

    我注意到并不是每个浏览器都应用 EXIF 方向 我的手机上的 Chrome 不应用 EXIF 方向 但 Safari 手机则应用 那么既然它不是标准的 那么如何在 Safari 上应用 EXIF 方向而不应用两次呢 另外我想知道是否可以在客
  • 如何重定向到 $.AJAX 上的视图完整 - asp.net mvc 3

    好的 我想在验证检查后使用 AJAX 将用户重定向到周围视图 我该怎么做 请帮忙 这是我的 AJAX 代码 EX 我希望用户重定向到 Home Movies 控制器操作 如果未登录 则停留在同一页面
  • 在 Magento 中使用缩略图切换基本图像

    在定制的产品视图页面上 我正在处理基本图像 大图像 和缩略图列表 这些缩略图是与媒体库中的产品相关的其他图像 它们只是普通图像 而不是定义的图像 缩略图 我的任务是获取它 以便当您单击缩略图时它会更改上面的基本图像 我已经可以工作了 但是我
  • 如何识别当前打开的每个单独的浏览器窗口?

    如何使用 javascript 唯一地识别当前为所有主要浏览器打开的每个单独的浏览器窗口 让我解释一下我需要了解的内容 并考虑以下场景 我有 3 个当前打开的浏览器窗口 任何现代浏览器 即 Chrome Firefox 等 每个窗口都包含多
  • HTML 解析 - 从 div 内的表格获取数据?

    我对 HTML 解析 抓取的整个想法还比较陌生 我希望我能来这里获得我需要的帮助 基本上我想要做的 我认为 是指定我希望从中获取数据的页面的 url 在这种情况下 http www epgpweb com guild us Caelestr
  • 为什么 jQuery 的 .change() 事件仅在单击鼠标右键时触发?

    我在使用 jquery 时遇到了问题 change 当我修改输入元素时发生事件 据说 每当我对所述元素进行实时更改时 该事件就会触发 但就我而言 它仅在我按下右键单击按钮后才会触发 这是我的代码laravel框架 HTML div clas
  • 使用 javascript/jquery 检查 .css 样式表的名称

    我正在尝试为论坛制作一个小 chrome 扩展 但我只希望它在论坛的某个区域中工作 问题是我不能只做 matches subforum 因为该论坛中的线程无法通过 URL 区分它们所在的子论坛 subforum 有自己的 css 样式表 所
  • 动态添加项目到放大弹出画廊

    有没有办法动态添加图库项目华丽的弹出窗口 http dimsemenov com plugins magnific popup 那已经开放了 或更新当前项目 找不到关于 in 的任何内容插件文档 http dimsemenov com pl
  • 使用 Javascript 编辑和保存用户 HTML - 安全性如何?

    例如我有一个Javascript 支持的表单创建工具 您可以使用链接添加元素的 html 块 如输入字段 并使用 TinyMCE 来编辑文本 这些是通过自动保存功能保存的 该功能在特定事件的后台执行 AJAX 调用 被调用的保存函数负责数据
  • jquery validate - 在验证发生之前替换字段中的逗号

    看来 即使使用当前的验证插件 如果您想使用 min 进行验证 也不能在值中包含逗号 我在github上发现了几个月前 11个月 提交的补丁来修改源 js文件 但它仍然没有发布 因此 我没有修改源 js 文件 而是尝试找出如何在验证之前替换逗
  • 带分页的过滤表

    我想要一个带有分页的表格 同时在表格标题中带有搜索框 所以使用这段代码jsfiddle分页 http jsfiddle net Xugej 1445 I want output like this 这是我的过滤代码 function sea

随机推荐

  • 在 Notepad++ 中每行末尾添加一个字符 )

    我想添加 字符 右括号 到所有行的末尾 I see CR是每行的结束符号 菜单 gt 视图 gt 显示符号 gt 显示行尾 我尝试更换 r with r在正则表达式模式下但它不起作用 我该怎么做呢 Use 在正则表达式模式下匹配行尾 用 来
  • Maven 中的 SSL 客户端证书

    我使用 maven jaxb22 plugin 生成类 以便我可以调用用 Net 编写的 Web 服务 通常它工作正常 但这次 我只能使用客户端证书通过 HTTPS 访问 WSDL 无法通过 HTTP 访问 我能够让它与 SoapUI 一起
  • 在 C++ 中将一个文件的内容复制到另一个文件

    我正在使用以下程序尝试将文件 src 的内容复制到 C 中的另一个文件 dest 简化的代码如下 include
  • 将文本基线与 CSS 中的按钮对齐

    I would like to achieve one of the two alignments represented on this image CSS3 is ok or even better if it makes things
  • 标准化编辑距离

    我有一个问题 我们可以通过将 e d 值除以两个字符串的长度来标准化编辑距离吗 我问这个问题是因为 如果我们比较两个长度不等的字符串 两个长度之间的差异也会被计算在内 例如 ed 有一个 有一个球 4 和 ed 有一个 有一个球是圆的 15
  • 设置/更新 aspxauth 和 asp.net_sessionid cookie 的过期时间

    我想知道是否有一种方法可以设置 NET 应用程序来设置和更新浏览器中 aspxauth 和 asp net sessionid cookie 的过期时间 据我所知 cookies 的过期日期类似于 1 1 0001 告诉浏览器保留它们直到浏
  • 所有屏幕设备的图像尺寸

    I have PSD 其分辨率为1080X1920 它包含一个Dot分辨率为的图像22X22 我已经裁剪了该图像并将其放入我的res folder 我的问题是 Android 如何知道该图像的用途1080X1920屏幕 它会打开更大的相同图
  • 如何在ES6模块中导入部分对象

    In the 反应文档 https facebook github io react docs pure render mixin html我找到了这种导入 PureRenderMixin 的方法 var PureRenderMixin r
  • Perl 中的 '`' 字符有什么作用?

    我使用 Perl 来读取文件的每一行 我使用命令行工具来调用服务 我注意到一些有趣的功能 但我不知道如何搜索 到变量 cmd我分配了调用该服务的命令 如果我参考 cmd稍后在代码中它会打印出命令行参数 但如果我将其称为 cmd 但是 它给出
  • Yosemite SSL:设置了 CA 证书,但禁用了证书验证

    自从安装 Yosemite 以来 我不断收到错误 SSL CA 证书集 但证书验证已禁用 终端中的每个 https url 都会出现这种情况 找不到如何解决这个问题 有什么建议吗 谢谢 坦率 对于其他来到这里试图弄清楚为什么他们在使用 Wo
  • 按值对 HashMap 数据进行排序

    我想在 Rust 中按值对 HashMap 数据进行排序 例如 在计算字符串中的字符频率时 我正在尝试做的 Python 等效项是 count for c in text count c count get c 0 1 sorted dat
  • PhoneGap/Cordova 日历集成 (Android)

    我正在使用 PhoneGap 又名 Cordova 构建 Android 应用程序 但在日历集成工作方面遇到问题 免责声明 我对 Android 和 PhoneGap 都是菜鸟 请耐心等待 我想做的就是向用户的日历添加一个事件 下列的本教程
  • 在AWS Elastic Beanstalk上的node.js项目中编译less文件并缩小js文件

    我正在使用 Eb 命令行界面将 node js 项目部署到 AWS Elastic Beanstalk 我正在使用 git 进行版本控制 因此 我运行的部署命令只是 git aws push 在本地 我使用 grunt 从 less 文件编
  • 是否可以同时安装2个不同版本的GCC?

    我使用的是Ubuntu 9 10对于一段特定的代码 我需要 GCC 3 2 但我有更高的版本 是否可以安装多个版本并使用我想要的任何一个 你 如果 gcc 3 3 没问题 您可以为 dapper 下载 gcc 3 3 和相关的 deb 软件
  • 安装 Expo CLI 时无法清除此错误 - ENOTEMPTY

    以下是错误 npm 错误 代码 ENOTEMPTY npm 错误 系统调用重命名 npm 错误 路径 usr local lib node modules expo cli npm 错误 dest usr local lib node mo
  • Spring Context 和 Bean Lifecycle 回调:实际使用示例

    我对春天有一点经验 我想知道 Spring Context Bean Lifecycle 中的回调数量 我从未使用过它们 并且可以想象最需要它们的情况 我的问题是 您能为每个回调提供至少一个使用示例吗 表示您需要回调的情况 Conext c
  • '(unsigned)1' 和 '(unsigned)~0' 之间的区别

    有什么区别 unsigned 0 and unsigned 1 为什么是unsigned of 0 is 1 and unsigned of 1 is 1 这是否与无符号数在内存中的存储方式有关 为什么无符号数会给出有符号的结果 它也没有给
  • 如何在关系数据库中存储字典树?

    我有一个前缀特里树 在关系数据库中表示此结构的推荐模式是什么 我需要子字符串匹配才能保持高效 怎么样物化路径 http www dbazine com oracle or articles tropashko4 design CREATE
  • 在 C# 中以编程方式查找 windows 文件夹

    我正在编写一个程序来终止并重新启动资源管理器 但我不想对位置进行硬编码 因为有些人将 Windows 安装在不同的位置 例如 我发现有人将其安装在 d 驱动器中 其中 C 驱动器确实存在 但上面没有安装任何东西 我尝试在Environmen
  • Backbone View 事件获得正确的目标

    给出以下简单的 html div class someContainer h5 Some other information h5 div 以及以下主干视图 var view Backbone View extend events clic