向div添加onclick事件

I don't know if this is allowed or even possible. Is it possible to create a div element with an onclick event so that if anywhere in the div's area is clicked, the event will run.

我不知道这是否允许，甚至可能。是否可以使用onclick事件创建一个div元素，以便在单击div区域的任何位置时，该事件将运行。

Eg JAVASCRIPT:

如JAVASCRIPT:

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 generated:

HTML生成:

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

 whatever content I decide to add to the divTag.innerHTML

I notice how theres no onclick command going through to the generated div. Id this because its not allowed?

我注意到没有onclick命令通过生成的div。Id这是因为它不允许?

So 2 questions then.

那么两个问题。

1:Is it possible to add onclick to a div and have it occur if any area of the div is clicked. 2:If yes then why is the onclick method not going through to my div.

1:是否可以将onclick添加到div中，如果单击了div的任何区域，就会发生这种情况。2:如果是，那么为什么onclick方法不能通过我的div呢?

How very odd:

非常奇怪:

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

Above works flawlessly.

以上工作完美。

All below don't and wont pass the onclick to the div.

以下所有内容都不会将onclick传递给div。

divTag.onclick=printWorking;

divTag.onclick="printWorking";

divTag.onclick="printWorking()";

Multiple other variants have been tried too.

还尝试了其他多种变体。

3 个解决方案

#1

Is it possible to add onclick to a div and have it occur if any area of the div is clicked.

是否可以将onclick添加到div中，并在单击div的任何区域时发生它。

Yes … although it should be done with caution. Make sure there is some mechanism that allows keyboard access. Build on things that work

是的，尽管应该小心行事。确保有某种机制允许键盘访问。建立在有用的东西上

If yes then why is the onclick method not going through to my div.

如果是，那么为什么onclick方法没有通过div。

You are assigning a string where a function is expected.

在期望函数的地方分配一个字符串。

divTag.onclick = printWorking;

There are nicer ways to assign event handlers though, although older versions of Internet Explorer are sufficiently different that you should use a library to abstract it. There are plenty of very small event libraries and every major library (such as YUI or jQuery) has event handling functionality.

虽然有更好的方式来分配事件处理程序，但是旧版本的Internet Explorer非常不同，您应该使用一个库来抽象它。有很多非常小的事件库，每个主要的库(如YUI或jQuery)都有事件处理功能。

#2

Assign the onclick like this:

像这样分配onclick:

divTag.onclick = printWorking;

The onclick property will not take a string when assigned. Instead, it takes a function reference (in this case, printWorking).
The onclick attribute can be a string when assigned in HTML, e.g. <div onclick="func()"></div>, but this is generally not recommended.

onclick属性在分配时不会接收字符串。相反，它需要一个函数引用(在本例中是printWorking)。onclick属性可以是在HTML中分配的字符串，例如

，但一般不建议这样做。

#3

Everythings works well. You can't use divtag.onclick, becease "onclick" attribute doesn't exist. You need first create this attribute by using .setAttribute(). Look on this http://reference.sitepoint.com/javascript/Element/setAttribute . You should read documentations first before you start giving "-".

一切运行良好。你不能使用divtag。onclick，因为“onclick”属性不存在。您需要首先使用. setattribute()创建这个属性。查看这个http://reference.sitepoint.com/javascript/Element/setAttribute。你应该在开始给出“-”之前先阅读文件。

#1