Question

我在div：

中有一张图片

<div id="elem-0" onClick="updateSelectedElement(0);">
  <img src="#" id="elem-1" onClick="updateSelectedElement(1);">
</div>

我将在选中后删除此图片。我通过收听每个元素的onclick()来检测选择：

function updateSelectedElement(id) {
  // select the clicked element     
  SelectedElement = "#elem-" + id;
}

注意：ID是动态创建的（我在本例中简化了我的问题）

我的问题是，当我点击图片进行选择时，首先调用updateSelectedElement()图像，然后调用div的updateSelectedElement()。 SelectedElement的最终值为＆＃34; 0＆＃34;而且我无法选择那个内部元素（例如，修改或删除它）

我试图保存最大ID数，但它不起作用，因为如果我有一些ID较低的其他元素，我就不能再选择它们了。

Answer 1

通过添加function updateSelectedElement(id) { console.log(id) if (event.stopPropagation) { event.stopPropagation(); } else { window.event.cancelBubble = true // For IE } }

来停止点击事件冒泡DOM

import json
import tempfile
import os
import subprocess
def view_obj(obj):
  (f, filepath)= tempfile.mkstemp()
  os.close(f)
  with open(filepath, 'w') as f:
    json.dump(obj, f)
    subprocess.call(["google-chrome", filepath])

view_obj({'key':'value'})  # Opens Chrome and renders JSON nicely

<强> jsFiddle example

Answer 2

您是否需要像这样传递ID，即使用updateSelectedElement？

或者你可以将this传递给所选元素，并在此示例中删除（我使用按钮代替图像，但概念相同）：

HTML：

<div>
    <button onclick="addToCache(this)">Do Delete 1</button>
</div>
<div>
    <button onclick="addToCache(this)">Do Delete 2</button>
</div>
...

JAVASCRIPT：

var deletionCache = []; //keep a cache of things to be deleted

function doDeleteCache() {
    for (var i = 0; i < deletionCache.length; i++) {
        elem = deletionCache[i];
        elem.parentNode.removeChild(elem);
    }
    deletionCache = [];
}

function addToCache(elem) {
    deletionCache.push(elem);
    elem.style.color = "red";
}

http://jsfiddle.net/3exn763w/2/

Answer 3

如果我理解正确，你说当你点击图像时，它最终会在div上注册点击（因为，图像毕竟是父div的一部分）。

解决这个问题的方法是：

LocalSettings.php

和

<div id="elem-0" onClick="updateSelectedElement(event,0);">
  <img src="#" id="elem-1" onClick="updateSelectedElement(event,1);">
</div>

这将阻止点击将DOM树传播到您尝试访问的任何内容的父元素。

但是，我真的建议你不要使用＆＃34; onclick＆＃34;在这里内联...它变得如此混乱和难以管理。相反，只需创建一个类＆＃34;可移动＆＃34;或者你想要的任何元素的东西，然后弹出一些jQuery：

function updateSelectedElement(event,id) {
 SelectedElement = "#elem-" + id;
 event.stopPropagation();
}

和

<div>
  <img src="#" class="removable">
</div>

Answer 4

你需要像这样停止传播：

＆＃13;

function updateSelectedElement(e) {
	e.stopPropagation();
	document.body.appendChild(document.createTextNode(e.target.id));
}

＆＃13;

<strong>Click a label</strong><p>
<div id="elem-0" onClick="updateSelectedElement(event);">
  outside div<br>
  <div id="elem-1" onClick="updateSelectedElement(event);">inside div</div>
</div>

＆＃13;

访问内部HTML元素并删除它们

4 个答案: