[jQuery] — click 與 dblclick

Danny Hu
Feb 11, 2024

--

[jQuery] — click 與 dblclick

HTML

<h1 id="h1-1">Header</h1>
<button id="change-color-red">Red</button>
<button id="change-color-blue">Blue(double-click)</button>

click

使用 click() 增加點擊事件。

$("p").click(function(){
// action goes here!!
})

這裡為 red 按鈕增加點擊事件。

當滑鼠點擊 red 按鈕時,會改變 id 為 h1–1 的元素顏色。

$('#change-color-red').click(function () {
$('#h1-1').css('color', 'red')
})

dblclick

使用 dblclick() 增加雙擊事件。

$("p").dblclick(function(){
// action goes here!!
})

這裡為 blue 按鈕增加雙擊事件。

當滑鼠雙擊 blue 按鈕時,會改變 id 為 h1–1 的元素顏色。

$('#change-color-blue').click(function () {
$('#h1-1').css('color', 'blue')
})

參考資料

https://www.w3schools.com/jquery/jquery_events.asp

https://api.jquery.com/category/events/

https://api.jquery.com/click/

https://api.jquery.com/dblclick/

--

--

Danny Hu

天賦探索 x 能量做事 x 生活美好 :生命美好可以創造,思想語言成就你世界