首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么不能在同一个按钮的click事件内部触发click事件?

在同一个按钮的click事件内部触发click事件会导致递归调用,从而形成无限循环。这是因为每次触发click事件,会执行绑定在该按钮上的click事件处理函数,而在click事件处理函数中再次触发click事件,又会导致该函数再次执行,如此循环下去。

这种无限循环会导致浏览器崩溃或页面假死的情况发生,因为浏览器在处理事件时需要不断地重绘页面,而递归调用会占用大量的浏览器资源,导致页面无法正常响应。

为了避免这种情况发生,一般情况下,应该将需要在按钮点击时执行的代码逻辑直接放在click事件处理函数中,而不是再次触发click事件。

注意:在一些特殊的场景下,可能会有需要在按钮的click事件内部触发click事件的情况,但这需要开发者对事件流程和逻辑非常清楚,并且有明确的控制机制,避免出现无限循环的情况。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery 双击事件(dblclick)时,触发单击事件(click)

出处:jQuery 双击事件(dblclick)时,触发单击事件(click) 在jQuery事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...)时却会触发两次单击事件(click)。...mouseout,click,dblclick; 在双击事件(dblclick),触发两次单击事件(click)中,第一次单击事件(click)会被屏蔽掉,但第二次不会。...}) 从测试结果来看,如果前后两次点击时间在 300ms 左右时候,还是很容易出现 click 和 dblclick 事件被“同时”调用情况,而如果间隔时间更短或更长,则只会有 click

5.3K30
  • 进阶必备-Android Click事件是怎么触发

    在默认我们不做任何特殊设置时,三者能响应click事件只有Button。这是什么原因呢?...所以如果不在xml中设置,View和TextView是不会响应点击事件,那么我们翻开Button源码看下为什么唯独它是响应呢?...所以,我们猜测是在MotionEvent.ACTION_UP事件触发click。所以我们直接看if条件中ACTION_UP中逻辑: if (!...然后会通过Post Runable方式将PerformClick实例post到队列中等待处理,直接去处理click事件而是使用post方式是确保如果有视图相关更新操作完成后再触发performClickInternal...因为onCLick事件是在手指抬起后触发,所以我们选择分析是ACTION_UP事件,但是长按事件是在我们长按某个View时候触发,所以并没有将手指抬起来。

    2.2K20

    iScroll click事件触发两次解决方案

    iScroll呢其实是截获了点击浏览器时touchstart和touchend事件。在touchend时候使用js去触发元素onclick事件(_end这个函数)。...而在实际操作中,先执行了touchend,然后再执行了一次onclick相关函数。这样就形成了头疼一次点击两次触发!...网上有很多代码说解决“iScroll click事件”点击一次触发两次,我也是按着各位大神步骤写,但是依旧不成功,也可能是操作不对,我附上我执行操作代码,我已经成功。...解决方案1:点击事件使用Zepto tap ,进行解决。 解决方案2:在iscroll搜索that.doubleTapTimer将其注释掉 或者 直接注释以下557-573行即可!...ev = doc.createEvent('MouseEvents'); ev.initMouseEvent('click

    1.3K20

    WPF 已知问题 开启 IsManipulationEnabled 之后触摸长按 RepeatButton 不会触发连续 Click 事件

    Click 事件 这是有个伙伴在 WPF 官方仓库报告问题,详细请看 https://github.com/dotnet/wpf/issues/8223 原始问题是他发现放在 ListBox 里面的...RepeatButton 无法在触摸长按时候收到连续 Click 事件,以为是放在 ListBox 下 RepeatButton 存在奇怪问题 实际上他这个问题和 ListBox 没有任何关系...,仅仅只是因为开启了 IsManipulationEnabled 之后,为了实现触摸漫游,无法实时提升触摸为鼠标,从而导致了使用鼠标事件 RepeatButton 无法触发源源不断 Click 事件...RepeatButton 在触摸长按时不断触发 Click 事件,如下面代码例子,以下是 XAML 部分代码,可以看到只是简单在 ListBox 里面放入一个 RepeatButton 控件 <ListBox...,将发现 Click 事件不会源源不断触发

    17010

    前端基础-事件

    第2章 事件 2.1 什么是事件 一种 触发—响应 机制; 用户行为 + 浏览器感知(捕获)到用户行为 + 事件处理程序 事件三要素: 事件源:(被)触发事件元素 事件类型:事件触发方式...(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行代码(函数形式) 2.2 事件绑定 行内方式绑定(元素属性) <input type="button" value="<em>按钮</em>...2.3 三种<em>事件</em>绑定比较 this关键字 在JavaScript中,每一个函数<em>的</em><em>内部</em>都存在一个this关键字,其随着运行环境<em>的</em>不同,其指向也是不同<em>的</em>。...动态绑定,其<em>事件</em>处理程序<em>内部</em><em>的</em>this指向了当前正在操作<em>的</em>dom对象。 需求:<em>同一个</em>元素<em>的</em><em>同一个</em><em>事件</em>,绑定多个处理函数: <!...但是处理函数中<em>的</em> this 指向<em>的</em>选中<em>的</em>对象; 第三种:addEventListener方法可以针对<em>同一个</em>元素<em>的</em><em>同一个</em><em>事件</em>,添加多个监听处理函数。

    1.3K10

    JavaScript HTML DOM EventListener

    addEventListener() 方法 实例 在用户点击按钮触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate...; } 向同一个元素中添加多个事件句柄 addEventListener() 方法允许向同一个元素添加多个事件,且不会覆盖已存在事件: 实例 element.addEventListener("click...事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发顺序。 如果你将 元素插入到 元素中,用户点击 元素, 哪个元素 "click" 事件先被触发呢?...在 冒泡 中,内部元素事件会先被触发,然后再触发外部元素,即: 元素点击事件触发,然后会触发 元素点击事件。...在 捕获 中,外部元素事件会先被触发,然后才会触发内部元素事件,即: 元素点击事件触发 ,然后再触发 元素点击事件

    64920

    Android触摸事件和mousedown、mouseup、click事件之间关系

    规范要求,只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 中一个被取消,就不会触发 click 事件...实际这个就利用了click事件要求在同一个元素相继触发mousedown和 mouseup 事件。...click:在用户单击主鼠标按钮(一般是左边按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。...dblclick:在用户双击主鼠标按钮(一般是左边按钮)时触发。从技术上说,这个事件并不是DOM2级事件规范中规定,但鉴于它得到了广泛支持,所以DOM3 级事件将其纳入了标准。...IE、Firefox 9+和 Opera支持这个事件。 mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件

    2.8K30

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    当用户焦点在按钮上并按了 Enter 键时,同样会触发这个事dblclick:双击鼠标左键时发生,如果右键也按下则不会发生contextmenu :弹出右键菜单。...对应移除事件是mouseoutmouseenter(鼠标进入):当鼠标移入元素本身(包含元素子元素)会触发事件,也就是不会冒泡,对应移除事件是mouseleavemouseenter/mouseover...(想要阻止mouseover冒泡事件就用mouseenter)mouseenter/mouseover共同点:当二者都没有子元素时,二者行为是一致,但是二者内部都包含子元素时,行为就不同了.总结就是...:mouseover和mouseenter异同体现在两个方面:是否支持冒泡事件触发时机可见mouseover事件因其具有冒泡性质,在子元素内移动时候,频繁被触发,如果我们希望如此,可以使用mouseenter...》mouseup-》click-》blurmousedown、mouseup、click若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件若在同一个元素上按下并松开鼠标右键

    3.6K21

    「面试常问」系统理解浏览器之事件机制

    这是布兰第 10 篇原创 事件流 在早期 IE 和 Netscape 团队在开发第四代浏览器时候,遇到一个问题:当点击一个按钮时候,是应该先处理父级事件呢?还是应该先处理按钮事件呢?...,即可以在捕获阶段触发事件,而 DOM0 是不行; addEventListener 可以为同一个元素多次添加同一类型事件处理程序,先添加事件处理程序会先触发,而 DOM0 如果给同一个元素绑定多个相同类型事件处理程序的话...,则后面添加会覆盖前面定义; 它有几个注意事项: 如果不需要在捕获阶段进行拦截操作,则 useCapture 即第三个参可以传; 通过 addEventListener 添加事件处理程序只能通过...DOM0 一样,需要带上 on,比如 onclick; 在通过 attachEvent 添加事件处理程序内部 this 会指向 window,而 DOM0 和 DOM2 this 会指向元素本身...; 和 addEventListener 一样, attachEvent 也可以针对同一元素多次添加同一个事件类型处理程序,但是触发顺序是后定义触发; 通过 detachEvent 移除事件处理程序时候

    55620

    Vue2学习计划五:v-on、v-model、v-if、v-for和v-show

    别急,这正是今天要学v-on主场。 产品经理太可恶,我们实现一个其他事件监听案例,实现一个计数器。有按钮加和按钮减,然后将数值展示出来。...点击按钮事件监听,鼠标位置也可以是事件监听,那么怎么将DOM元素事件信息传递回来呢?下一节可以正是登场了。...这种抽象东西,我们只能上代码,然后带着上面的问题,去代码中分析,希望能将抽象具体化。下面的代码展现了同一个方法调用时加不加小括号,传传入参数,传入浏览器事件区别。...event事件当作第一个实参传入,第二个为undefined 调用时只有小括号没有实参,在方法内部两个形参都为undefined 调用时只有一个实参,在方法内部另一个形参为undefined 注意:...{keyCode | keyAlias} 当事件从特定键触发时才触发回调。keyCode指键盘编码,用于监听键盘事件

    4.2K20

    jQuery:详解jQuery中事件(二)

    那么在单击子元素A时候,会依次触发三个click事件;单击元素B时候,会依次触发两个click事件。   ...5、移除事件:在绑定事件过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。   ...所以,移除事件就涉及两种情况下移出,一种是移除之前注册所有事件,而是移除其中一个事件。以一个按钮为例:假设网页中有一个id为btn按钮,其上绑定了几个click事件。...那么:   首先添加一个移除事件按钮: 移除所有事件   然后可以为该按钮绑定若干click事件,使用链式操作就可以很简单为其绑定几个click...jQuery代码如下: $("#delAll").click(function(){ $('#btn').unbind("click"); })   因为元素绑定都是click事件,所以上面写“

    2.2K30

    第79天:jQuery事件总结(二)

    那么在单击子元素A时候,会依次触发三个click事件;单击元素B时候,会依次触发两个click事件。   ...三、移除事件: 在绑定事件过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。   所以,移除事件就涉及两种情况下移出,一种是移除之前注册所有事件,二是移除其中一个事件。...以一个按钮为例:假设网页中有一个id为btn按钮,其上绑定了几个click事件。...那么:   首先添加一个移除事件按钮: 移除所有事件 然后可以为该按钮绑定若干click事件,使用链式操作就可以很简单为其绑定几个click...jQuery代码如下: $("#delAll").click(function(){ $('#btn').unbind("click"); }) 因为元素绑定都是click事件,所以上面写“click

    1.6K20

    webapi(五)- 事件对象

    事件对象 含义 当事件触发时候 ,会产生对象,记录一些事件和有关信息 获取 事件处理函数中,形参就是事件对象 document.addEventListener('click' , function(...) }) 事件流 指的是事件完整执行过程中流动路径 两个阶段:先捕获在冒泡 捕获阶段是 从父到子 冒泡阶段是 从子到父 事件冒泡 当一个元素事件触发时,同样事件将会在该元素所有祖先元素中依次被触发...if(e.target.tagName === 'P') alert('p被点击啦~') }) 两种注册事件区别 传统on注册(L0) 同一个对象,后面注册事件会覆盖前面注册(同一个事件)...直接使用null覆盖就可以实现事件解绑 都是冒泡阶段执行 // 需求:按钮点击事件只能触发一次 // 解绑事件 // 解绑语法: 元素.onclick = null btn.onclick...} 事件监听注册(L2) 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) 后面注册事件不会覆盖前面注册事件(同一个事件) 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

    1K20

    JavaScript——DOM事件高级

    同一个元素同一个事件只能设置一个处理函数,最后注册处理函数将会覆盖前面注册处理函数。...eventTarger(目标对象)上,当该对象触发指定事件时,就会执行事件处理函数。...,是一个布尔值,默认是false 注:同一个元素同一个事件可以添加多个监听器(事件处理程序) 按钮 按钮 </...有些事件没有冒泡:onblur、onfocus、onmouseenter、onmouseleave 事件对象 event对象代表事件状态,比如键盘按键状态、鼠标的位置、鼠标按钮状态。...事件对象属性方法 说明 e.target 返回触发事件对象  标准 e.srcElement 返回触发事件对象  非标准 e.type 返回事件类型 比如click mouseover 不带on

    1.8K10

    与Ajax同样重要jQuery(2)

    5.jQuery事件 ①:事件绑定 传统js 一般一个对象只能绑定某种事件一个函数 jQuery 支持对同一个对象,同一个事件可以绑定多个函数 绑定事件函数到对象有两种写法 写法一 $("div").click...②:事件一次性绑定和自动触发 一次性事件 one(type, [data], fn) 为对象绑定一次性事件,只有一次有效 触发事件 trigger(type, [data]) 触发目标对象指定事件执行...练习1: ² 为页面内所有p 元素绑定 一次性事件,点击打印p元素中内容 ² 页面内有两个按钮,点击按钮1, 触发按钮2 click事件执行 <script type="text/javascript...p元素中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮,点击按钮1, 触发按钮2 click事件执行 $...("#mybutton1").click(function(){ alert("点击了按钮一"); // 触发2 click事件 $("#mybutton2").trigger("click"); })

    6.2K50
    领券