个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在学习事件委托(delegate)，但遇到了问题。
一开始我做初稿的时候，如果点击只会删除文字，不会删除按钮，所以我修改了它。后来，当点击容器div时，它删除了整个内容，所以我再次更改它。
现在它是功能性的，但在我看来，它可以写得更通用(不需要添加类名，只需添加容器的id)并且以更有效的方式，我觉得还有更多代码比应有的要多。
还有一件事:它应该与动态添加的元素一起使用。
任何帮助将不胜感激!
function getTarget(e) {
return e.target;
}
function remove(e) {
var target = getTarget(e);
target.parentNode.removeChild(target);
}
function remove1(e) {
var target = getTarget(e);
var parent = target.parentNode;
parent.parentNode.removeChild(parent);
}
document.getElementById("contenedor").addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "DIV" && e.target.classList.contains("bot")) {
remove(e);
}
if (e.target && e.target.nodeName === "SPAN") {
remove1(e);
}
document.getElementById("parrafo").textContent = "Hice click en";
});<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="contenedor">
<div class="bot" id="boton" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton1" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton2" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton3" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton4" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton5" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
</div>
<br>
<script src="script.js"></script>
</body>
</html>最佳答案
在 JS 事件中，e.target是执行操作(单击)的元素，this代码附加到的元素。这可以用来检查parentNode是否是点击所附加的div(好吧，可以通过通过其id检查父节点是否是div来完成相同的操作，但由于这是一个事件委托(delegate)练习，this更重要有趣:))
document.getElementById("contenedor").addEventListener("click", function (e) {
var target = e.target;
if(target!==this){ //if the div itself is clicked do nothing
while(target.parentNode !== this) //loop up until it's a direct parent, this also works with multiple nested elements
target = target.parentNode;
target.parentNode.removeChild(target);
}
document.getElementById("parrafo").textContent = "Hice click en";
});
作为旁注，不要添加 <BR>在每个 div 下，您还可以通过 css 更改边距，例如
.bot{
margin-bottom:20px;
}
这样做的优点是删除的元素保留相同的空间(当然，除非这不是本意；))
示例:fiddle
关于javascript - 事件委托(delegate): Affecting more elements than it should，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31300192/
29
4
0
我有一个加载 View 的 View ，需要将 View 推送到主导航 Controller 。 我已经为每个 View 设置了一个委托(delegate)，并且基本上使我的调用沿着“链”返回到主导航
我通过 NSURLConnction 从服务器获取数据，并希望从获取的数组中填充表格 View 。数据出现在 NSURLConnection 委托(delegate)方法的日志中，但我意识到 numb
我已经将我用作标题 View 的 View 子类化，它里面有一些按钮委托(delegate)，它工作得很好。 但是，我在 viewController 上方展示了一个 modalViewControl
我希望这听起来像是一个显而易见的问题，但是委托(delegate)返回类型是否也必须与其委托(delegate)的方法的返回类型相匹配？ EG，像这样: public static void Save
我想使用 Kotlin 委托(delegate)，但我不想在委托(delegate)人之外创建委托(delegate)。委托(delegate)的所有示例都如下所示: interface Worker
我有一个问题: - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInf
伙计们。我正在寻求帮助。这似乎是一个非常简单的任务，但我可以解决一整天。我正在尝试使用容器 View 创建侧面菜单。当用户按下“更多”按钮(barButtonItem)时，整个 View 向右滑动并出
我正在努力将 UIWebView 迁移到 WKWebView。我已经更改了所有委托(delegate)方法。我需要 WKWebView 委托(delegate)方法等于下面的 UIWebView 委托
我正在学习 VB.NET 中的委托(delegate)，但对委托(delegate)类型感到困惑。在阅读有关委托(delegate)的内容时，我了解到委托(delegate)是一种数据类型，可以引用具
我有一个用 Objetive-C 构建的框架。该框架用于连接蓝牙设备并与之交互。 在演示代码中，Objetive-C 委托(delegate)函数如下所示。演示代码由框架创建者提供。 -(void)b
//NewCharts.h #import @interface NewCharts : UIViewController @property(nonatomic,retain)IBOutlet U
我正在努力了解 async/await 并认为我确实了解有关用法的一些事情。但仍然不太清楚在下面的场景中实际好处是什么。 查看 Task.Run 用法。第一种方法使用普通委托(delegate)并使用
我已经尝试了在我的网站上使用 openID 委托(delegate)的所有可能选项，但没有一个方法对我有用。 我的 HTML 文件的 head 部分有“link rel”标签。 我在 HTML 文件的
如何快速创建一个委托(delegate)，即 NSUserNotificationCenterDelegate？ 最佳答案 这里有一些关于两个 View Controller 之间委托(delegat
我有一个带有数据源的 NSComboBox，当您单击三角形并通过单击它选择其中一个项目时，它可以完美运行。但是，我还希望它允许用户在框中键入以使用自动完成来选择名称。目前，当用户键入时，我希望选择的项
我在代码中定义了以下类和委托(delegate)(为简洁起见，剪掉了许多其他行)。 Public Delegate Sub TimerCallback(canceled As Boolean) Pub
我使用 ansible 2.1 并且我想使用 delegate_to 向一组主机运行命令。我使用 localhost 作为主机参数，并且我想将“touch”命令委托(delegate)给两个 cls
我想通过重载为我的类实现几个构造函数。据我了解，遵循 DRY 原则的惯用方式是使用一种称为委托(delegate)构造函数的功能。我也看到了关于在任何地方使用引用参数并不惜一切代价避免使用指针的想法，
代表们会导致内存泄漏吗？ 我的意思是，例如如果一个类A包含一个ADelegate，并且后者指向BMethod(属于B类)，这可以防止GC收集A类或B类吗？ 如果是这样，我们如何“释放”代表(设置ADe
委托(delegate)命令和路由命令有什么区别？ 我读了一些文章说在 MVVM 上使用委托(delegate)命令而不是路由命令。 那么当我们使用 MVVM 时，Delegate Command 相
我是一名优秀的程序员,十分优秀！