div的onclick事件怎么失效了?

1 前言

div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了

2 代码

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>

<div id="open"></div>
<div id="close"></div>
<div id="close1"></div>
<div id="close2" onclick="close2()">
	关闭展示区2(div非拼接,(onclick=close2()))
</div>

<div id="area" style="background-color: red">展示区在此</div>

</body>
</html>
<script type="text/javascript">
	var html = `<div  cursor: pointer; onclick=‘close()‘>点击关闭展示区(onclick=close())</div>`

document.querySelector(‘#close‘).innerHTML = html;

var html = `<div onclick=‘close2()‘>点击关闭展示区(onclick=close2())</div>`

document.querySelector(‘#close1‘).innerHTML = html;

var html = `<div onclick=‘show()‘>点击打开展示区</div>`

document.querySelector(‘#open‘).innerHTML = html;
//此方法无法被触发,
function close(){
     document.querySelector(‘#area‘).style.display=‘none‘;
 }

 function close2(){
     document.querySelector(‘#area‘).style.display=‘none‘;
 }

 function show(){
     document.querySelector(‘#area‘).style.display=‘block‘;
 }

</script> 

分析:因为close是window的方法,所以不管拼接出来的还是原先写好的onclick方法都是一样的。

//在console输入
close
? () { [native code] }

3 参考

3.1 用JS添加的DIV,无法触发onclick事件 请求帮助 

原文地址:https://www.cnblogs.com/fanbi/p/10417113.html

时间: 2024-11-13 05:37:41

div的onclick事件怎么失效了?的相关文章

解决iscroll5在手机页面上onclick事件失效

Iscroll.js使用之后页面上面A标签的onclick事件无效了 解决办法 实例化IScroll的时候把preventDefault设为false,默认为true 1 var myScroll; 2 function loaded () { 3 myScroll = new IScroll('#wrapper', { 4 //preventDefault为false这行就是解决onclick失效问题 5 //为true就是阻止事件冒泡,所以onclick没用 6 preventDefault

通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案

问题描述: 如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上的问题,但是这种情况的确是遇到了多次,问题原因有待日后深入理解,下面记载一下问题的解决方案. 解决方案: 方案一:将事件绑定直接写在行内标签上"<thead onclick='myFunction(this)' >",其中,this代表的是当前元素,是一

给别的DIV上面加事件

<div id="dd" style="width:200px; height:200px; background-color:#669">这是一个层</div><span onclick="add1()">点击挂上事件</span><span onclick="remove1()">点击移除事件</span> </body><scrip

【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】

OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点击按钮后,执行postback,再运行. 如果一个按钮上我们同时有客户端的OnClientClick方法又有OnClick事件处理方法,如何才能按照正常的逻辑运行呢? OnClientClick中我们常用来做一些客户端的检测.当然放在服务器也可以做同样的检测,但这样做的代价是与服务器进行交互,消耗资

HTML Dom Event对象onclick事件

语法: onclick="SomeJavaScriptCode" onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同. 单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的. 支持该事件的 HTML 标签: <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <b

锋利的Jquery(p的onclick()事件)

1.一个p元素的点击事件 1 <html xmlns="http://www.w3.org/1999/xhtml" > 2 <head runat="server"> 3 <title>无标题页</title> 4 <script type="text/javascript"> 5 function ClickMe() { 6 alert('张晶是个粪堆'); 7 } 8 </sc

前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上.当我们触发它时,通过jQuery的子选择器找到内

给网页中的元素添加onclick事件(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>给网页中的元素添加onclick事件</p></title> <script src="jquery-1.7.1

asp.net中Button按钮点击两次才执行Onclick事件的原因

今天写了一个简单的聊天室,有登录页面和聊天室,当从登录页面跳入到聊天室过后,却发现要点击两次发送按钮才能发送到显示区,然后发送按钮正常运行. 通过不断测试,发现,第一次点击并没有执行点击事件,第二次才执行的点击事件.并且也找到了问题所在.下面用一个简单的小例子来说明: 页面Server_Transfer.aspx: <asp:Button ID="Button1" runat="server" Text="Button" OnClick=&