简体   繁体   English

如何找到事件处理程序添加到哪里?

[英]How to find where event handler added?

How can I found the trigger codes if there is a button which can do an event but it seems like has no set event handler? 如果有一个可以执行事件但似乎没有设置事件处理程序的按钮,如何找到触发代码? For example widget toolbox buttons in bootsrap templates. 例如,bootsrap模板中的小部件工具箱按钮。 The buttons have just a class but they are working well. 这些按钮只有一堂课,但是效果很好。

<a href="javascript:;" class="collapse" data-original-title="" title=""></a>

Where are the codes of this collapse function? 该折叠函数的代码在哪里?

The actual code to animate the collapse is in this scss collapse transition 动画塌陷的实际代码在此scss 塌陷过渡中

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

...and the actual transition is set here . ...实际的过渡在这里设置。

There is javascript that toggles the class states between the following states as documented here : 有javascript可以在此处记录的以下状态之间切换类状态:

  1. .collapse - Closed state of the "dropdown" component and the query to know what elements to apply collapse toggle logic to. .collapse “下拉列表”组件和查询的关闭状态,以了解要将折叠触发逻辑应用于哪些元素。

  2. .collapsing - Interim state between closed and open in which the css transition is applied. .collapsing处于关闭状态和打开状态之间的过渡状态,在该状态下将应用CSS过渡。

  3. .collapse.show - Open state of the "dropdown" .collapse.show “下拉列表”的打开状态

I assume that javascript logic is here for showing the "dropdown" when the [data-toggle]=collapse element is clicked in open state. 我假设在打开状态下单击[data-toggle]=collapse元素时, 此处的 javascript逻辑用于显示“下拉列表”。 Then the logic for hiding the "dropdown" is here . 然后,隐藏“下拉菜单”的逻辑就在这里 The show/hide logic is only toggling the css classes to correspond to the states above, which then triggers the css transition above. 显示/隐藏逻辑仅切换css类以对应于上面的状态,然后触发上面的css转换。

Notice the toggle of class on the "dropdown" between clicks 请注意,点击之间的“下拉列表”上的类切换

消息

As @A. 作为一个。 Wolff said, the default action of a button is to submit a form, which will lead you to another web page, specified on that form. 沃尔夫说,按钮的默认操作是提交表单,这将带您进入该表单上指定的另一个网页。

Have a look at the form element described at W3Schools , you can basically reach the same behaviour using the button element. 看一下W3Schools中描述的form元素,您基本上可以使用button元素达到相同的行为。

If you want to inspect what events are attached to your button, you can right click it and see the elements inspector. 如果要检查按钮上附加了哪些事件,可以右键单击它并查看元素检查器。

在图像上,Google Chrome浏览器的元素检查器

If there are no events attached then nothing will be shown, also, if this button belongs to a form, the default action is not considered as a Javascript Event. 如果没有附加事件,那么将不会显示任何内容,并且,如果此按钮属于表单,则默认操作不会被视为Javascript事件。

If you want to remove all listeners maybe you should take a look to this answer 如果您想删除所有听众,也许您应该看看这个答案

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM