如何通过使用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();

我知道它可以通过创建一个具有红色背景其他类完成，并补充说，当鼠标，取出时鼠标了。有没有更好的办法？

所以基本上你问为什么不是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>

点击后它会保持绿色。这不是目标。 –

所以你想支持红色？ –

是的。但是，您可以通过倾听鼠标和鼠标事件来做到这一点。这不是重点。关键是为什么当以编程方式触发点击与使用鼠标实际点击触发点击时行为有所不同？ –

答

'警报' 功能将阻止UI线程在浏览器（more info），换句话说，alert阻断以用红色来呈现在div。另外，您也可以使用console.log，像这样：

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

我同意。但是，去元素并点击。不一样的行为。我们正在讨论的是手动点击与JavaScript触发的点击。他们为什么不同？ –

如何通过使用Javascript触发点击事件来激活元素？

相关推荐