使用 ondblclick 函数影响整个 div 块
我最近开始学习 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值？
猛跑小猪浏览 173回答 3
3回答
-
当年话下
发生这种情况是因为<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
第一个 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> -
潇湘沐
您需要具有有效的 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>
随时随地看视频慕课网APP
相关分类
JavaScript