使用 ondblclick 函数影响整个 div 块

Question

我最近开始学习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 值？

Answer 1

您需要有有效的 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>

Answer 2

发生这种情况是因为您拥有的 <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>

Answer 3

第一个 p 元素基本上由下一个 div 元素终止，因为 p（等效段落）不能包含 divs。因此没有看到双击代码，因为实际上第一个 p 元素没有内容。

用 div 替换 p 元素并正确终止，意味着 div 中的任何内容都会导致双击。

但是，请注意并非所有浏览器都支持 ondblclick（请参阅 https://caniuse.com/?search=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>

使用 ondblclick 函数影响整个 div 块

Affecting whole div block with ondblclick function

html

javascript

dom

ondblclick