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事件 请求帮助　

div的onclick事件怎么失效了？的更多相关文章

  1. 嵌套div的onClick事件问题

    嵌套div的onClick事件问题我在下面的代码中的外层div中加了onClick事件,这样当鼠标点击这个div的时候就会跳转了.但是我在图片上加了一些其他效果,所以当鼠标点击中间的img时不能触发跳 ...

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

    Iscroll.js使用之后页面上面A标签的onclick事件无效了   解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...

  3. react中使用map时onClick事件失效

    分享一些踩过的坑 react中使用map时onClick事件失效 <span> { count.map( (item,index)=>{ return <span style= ...

  4. select中option的onclick事件失效

    html: <select id="pageSelect"> <option value="1" selected onclick=" ...

  5. 原生andriod浏览器回退后dom（click）事件全体失效问题探究

    问题描述 今天同事遇到一个神一样的BUG: 在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效! 我于是用ios测了下 ...

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

    OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...

  7. JS里的onclick事件

    可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  8. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  9. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

随机推荐

  1. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  2. 【alpha阶段】第一次Scrum Meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #2 数据库重构https://github.com/rRetr0Git/rateMyCourse/issues/2 #8 后端函数修正及重 ...

  3. 使用 Python 爬取网页数据

    1. 使用 urllib.request 获取网页 urllib 是 Python 內建的 HTTP 库, 使用 urllib 可以只需要很简单的步骤就能高效采集数据; 配合 Beautiful 等 ...

  4. [转载：Q1mi]Bootstrap和基于Bootstrap的登录验证示例

    转载自:Q1mi Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支 ...

  5. Python future使用

    Python的每个新版本都会增加一些新的功能,或者对原来的功能作一些改动.有些改动是不兼容旧版本的,也就是在当前版本运行正常的代码,到下一个版本运行就可能不正常了. 从Python 2.7到Pytho ...

  6. React Native——react-navigation的使用

    在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...

  7. ant在windows及linux环境下安装

    ant下载 http://ant.apache.org/ https://ant.apache.org/bindownload.cgi 历史版本 ant在windows下安装 解压到D盘 新建系统变量 ...

  8. lesson03

    3.1. 画 点 3.2. 基准平面 (重要) 1. 关于 点 的使用() 1.画一条直线,在线上画一个点(利用该点占该线段的百分比画出),通过该点画一条直线 2. 画一个长方体,定位到上表面.选择( ...

  9. 走进Java中的持有对象(容器类)之一 容器分类

    Java容器可以说是增强程序员编程能力的基本工具,本系列将带您深入理解容器类. 容器的用途 如果对象的数量与生命周期都是固定的,自然我们也就不需要很复杂的数据结构. 我们可以通过创建引用来持有对象,如 ...

  10. null引用，有时候是实现了父类的方法，方法体没写任何实现

    null引用,有时候是实现了父类的方法,方法体没写任何实现 /* @Override public void attachView(MonthListContract.View view) { } * ...