如何通過使用Javascript觸發點擊事件來激活元素？

我有一個div元素，並設置一個默認的顏色。當它處於活動狀態時，顏色會改變。所以，當點擊使用鼠標時，顏色會變成紅色。當DOM準備就緒時，我也觸發了一個點擊事件。但是，當我觸發點擊事件時，行爲是不一樣的。該元素不會更改顏色，並會消失。實現它的最好方法是什麼？如何通過使用Javascript觸發點擊事件來激活元素？

這是jsfiddle：https://jsfiddle.net/uvcwxLjr/。

var ele = document.querySelector('.clickMe'); 
ele.addEventListener('click', function() { 
    alert('You\'ve clicked me'); 
}); 
ele.click();

我知道它可以通過創建一個具有紅色背景其他類完成，並補充說，當鼠標，取出時鼠標了。有沒有更好的辦法？

來源

2016-09-18 Raghavendra Gujar

所以基本上你問爲什麼不是CSS'從click事件active'狀態觸發編程？ – j08691

您需要將類'active'添加到事件處理函數中的元素，並更改您的css，以便： .clickMe：active {background_color：green; } 是： .clickMe.active { background：green; } 帶冒號的CSS選擇器不正確。 – klikas

DIV無法處於活動狀態。這隻適用於某些類型的元素，例如錨點和按鈕。 – Barmar

$(function() { 
 
$(".clickMe").click(function() { 
 
    $(this).css('background-color', 'green'); 
 
    alert('change green'); 
 
    }); 
 
});

.clickMe { 
 
    width: 100px; 
 
    height: 100px; 
 
     background-color: red; 
 
     }

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<div class="clickMe"> 
 
</div>

來源

2016-09-18 22:17:59

點擊後它會保持綠色。這不是目標。 –

所以你想支持紅色？ –

是的。但是，您可以通過傾聽鼠標和鼠標事件來做到這一點。這不是重點。關鍵是爲什麼當以編程方式觸發點擊與使用鼠標實際點擊觸發點擊時行爲有所不同？ –

'警報' 功能將阻止UI線程在瀏覽器（more info），換句話說，alert阻斷以用紅色來呈現在div。另外，您也可以使用console.log，像這樣：

var ele = document.querySelector('.clickMe'); 
ele.addEventListener('click', function() { 
console.log('You\'ve clicked me'); 
}); 
ele.click();

來源

2016-09-18 22:21:51 CoderLim

我同意。但是，去元素並點擊。不一樣的行爲。我們正在討論的是手動點擊與JavaScript觸發的點擊。他們爲什麼不同？ –

如何通過使用Javascript觸發點擊事件來激活元素？

回答

相關問題