首頁猿問使用 ondblclick...

使用 ondblclick 函數影響整個 div 塊

JavaScript

猛跑小豬 2023-11-12 22:11:02

我最近開始學習 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;

}

<p>Just some text inside of the block.</p>

</div>

反對回復 2023-11-12

慕妹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 class="blueblock" id="bluebl">

? ? <p>Just some text inside of the block.</p>

? </div>

? document.getElementById('xx').addEventListener('dblclick',getID);

</script>

</body>

</html>

反對回復 2023-11-12

瀟湘沐

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;

}

<p>Just some text inside of the block.</p>

</div>

<p>Just some more text inside of the block.</p>

</div>

反對回復 2023-11-12

3 回答
0 關注
242 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 ondblclick 函數影響整個 div 塊

使用 ondblclick 函數影響整個 div 塊

3 回答

添加回答