0

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

4

3 回答 3

0

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

将 p 元素替换为 div 并正确终止，意味着 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>

于 2020-12-12T21:59:33.463 回答
0

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

于 2020-12-12T21:17:39.320 回答
0

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

于 2020-12-12T21:18:36.527 回答