我最近开始学习 DOM，并且看到了一些例子，但是，我正在尝试创建一个在双击后会触发的函数（获取 id）。这是我正在使用的 CSS、HTML 和 JavaScript 代码。function getID() { var x = document.getElementsByClassName("blueblock")[0].id; document.getElementById("xx").innerHTML = x;.blueblock { width: 30%; height: 50vh; float: left; background-color: lightblue; text-align: justify; overflow: auto;}<p id="xx" ondblclick="getID()"> <div class="blueblock" id="bluebl"> <p>Just some text inside of the block.</p> </div>我应该如何更改我的代码，以便单击该函数的任何部分blueblock都会触发该函数并输出id值？
3 回答
当年话下
TA贡献1890条经验 获得超9个赞
发生这种情况是因为<p>您拥有的标签没有内容。如果您将文本添加到<p>并双击该文本，它将起作用。
解决方案是使用div而不是p：
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerText = x;
}
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
<div id="xx" ondblclick="getID()">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
慕妹3242003
TA贡献1824条经验 获得超6个赞
第一个 p 元素基本上由下一个 div 元素终止，因为 ap（等效段落）不能包含 div。因此，看不到双击代码，因为实际上第一个 p 元素没有内容。
将 p 元素替换为 div 并正确终止，意味着 div 中的任何内容都会导致看到双击。
但是，请注意，并非所有浏览器都支持 ondblclick，因此我们通过使用 Javascript 将事件侦听器添加到元素来替换它。
这是完整的片段。请注意，当您双击时，innerHTML 会被替换，因此如果您再次双击，您将在浏览器控制台中看到错误，因为无法找到该元素 - 它不再存在。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerHTML = x;
}
</script>
<style>
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
</style>
</head>
<body>
<div id="xx">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<script>
document.getElementById('xx').addEventListener('dblclick',getID);
</script>
</body>
</html>
潇湘沐
TA贡献1816条经验 获得超6个赞
您需要具有有效的 html 元素嵌套，并且您可能应该适应这些部分中的多个部分。这是一个例子。
function getID(el) {
var x = el.getElementsByClassName("blueblock")[0].id;
document.getElementById(el.id).innerHTML = x;
}
.blueblock {
width:30%;
height:50vh;
float:left;
background-color:lightblue;
text-align:justify;
overflow:auto;
}
<div id="xx" ondblclick="getID(this)">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<div id="xx2" ondblclick="getID(this)">
<div class="blueblock" id="bluebl2">
<p>Just some more text inside of the block.</p>
</div>
</div>
添加回答
举报
0/150
提交
取消