css 添加onclick事件到div

gcmastyq  于 2023-01-18  发布在  其他
关注(0)|答案(4)|浏览(250)

我不知道这是否被允许或者可能,有没有可能创建一个带有onclick事件的div元素,这样如果在div区域的任何地方被点击,事件就会运行。
例如,Java脚本:

var divTag = document.createElement("div");
divTag.id="new-ID"; 
var onClickCommand = "printWorking()"   //printworking is another method that simply print "I'm working" to the console
divTag.onclick = onClickCommand;
console.log("onclick command added");
console.log(divTag.onclick);
parentDiv.appendChild(divTag); //This simply adds the div tag to the page.

生成的HTML:

<!--<div id="new-ID">-->

 whatever content I decide to add to the divTag.innerHTML

我注意到为什么没有onclick命令传递到生成的div.id this,因为它是不允许的?
那就两个问题。
1:是否可以将onclick添加到div中,并在单击div的任何区域时发生。2:如果可以,那么为什么onclick方法没有通过我的div?
真奇怪

divTag.setAttribute("onclick", "printWorking()");

以上工作完美。
下面所有的都没有也不会将onclick传递给div。

divTag.onclick=printWorking;

divTag.onclick="printWorking";

divTag.onclick="printWorking()";

也尝试了多种其他变体。

dwbf0jvd

dwbf0jvd1#

是否可以在div中添加onclick,并使其在div的任何区域被单击时发生。
是的......但是应该谨慎操作。请确保有某种允许键盘访问的机制。Build on things that work
如果是,那么为什么onclick方法没有通过我的div。
您正在将字符串赋值到需要函数的位置。

divTag.onclick = printWorking;

有更好的方法来分配事件处理程序,尽管旧版本的Internet Explorer有很大的不同,你应该使用一个库来抽象它。有很多非常小的事件库,每个主要的库jQuery)都有事件处理功能。
也就是说,现在已经是2019年了,旧版本的IE浏览器实际上已经不存在了,所以你可以直接使用addEventListener

yrdbyhpb

yrdbyhpb2#

按如下方式指定onclick:

divTag.onclick = printWorking;

onclick属性在赋值时不接受字符串,而是接受函数引用(在本例中为printWorking)。
onclick属性在HTML中赋值时可以是一个字符串,例如<div onclick="func()"></div>,但通常不推荐这样做。

ekqde3dh

ekqde3dh3#

一切正常。你不能使用divtag.onclick,因为“onclick”属性不存在。你需要先用.setAttribute()创建这个属性。看这个http://reference.sitepoint.com/javascript/Element/setAttribute。你应该先阅读文档,然后再给“-"。

h43kikqp

h43kikqp4#

你可以简单地给予div一个onclick函数,就像给按钮那样。

<div onclick="myfunction">Click me
</div>
<script>
function myfunction(){
alert("I gave a div an onClick!");
}
</script>

相关问题