如何为默认的点击行为添加额外的行为？答案

【问题标题】：How to add additional behaviour to default on-click behaviour?如何为默认的点击行为添加额外的行为？
【发布时间】：2017-11-30 17:31:59
【问题描述】：

我有一个按钮 A。 Onclick，我正在使用一个执行行为 B 的 js 库。我想做行为C，然后执行行为B。我有没有在行为B之前注入行为C？

当我尝试覆盖 onclick 事件时，所发生的只是行为 C 执行。 B 没有。

更具体地说，我使用 iris 颜色选择器作为 js 库，单击 html class="color-picker" 时，会打开一个下拉颜色选择器（即类似这样的东西... http://imgur.com/a/eLuug)

我想为 $('.color-picker') 的 iris onclick 处理程序添加一些功能。例如，我想让它一旦我点击颜色选择器输入文本框，我就可以明智地找到当前颜色选择器 div 的叔叔。

<div class ="dad"> Dad</div>
    <div class = "son color-picker"> son </div>
<div class = "auntie"> Aunt </div>
<div class = "uncle"> Uncle </div>

到目前为止我的尝试：

$('.color-picker').click(function (event) {
    var target = event.target;
    var parent = $(target).parent()[0];
    var uncle = $(parent).siblings()[1];
    ///other code follows....
});

但问题是我覆盖了默认功能 B，并且只执行行为 C（即找到单击的颜色选择器的叔叔）。如何在不从 iris 库中专门复制粘贴代码或修改库的情况下同时执行行为 B 和 C？

【问题讨论】：

你能发布一些代码吗？
欢迎来到 StackOverflow，请花点时间查看导览：stackoverflow.com/tour，如何创建最小、完整和可验证的示例：stackoverflow.com/help/mcve，更具体地说，如何提出好问题 stackoverflow.com/help/how-to-ask - 如果您在向 SO 寻求帮助之前对您的问题进行一些思考，并在代码中包含特定问题您将获得更好的反馈和有用的答案我尝试过 努力自己解决问题。了解具体问题后，您可以编辑帖子。

标签： javascript jquery html onclick onclicklistener

【解决方案1】：

只需在导入库之前输入您的 addEventListener 以首先触发您的回调。

<div id="clickable"></div>
<script>
    $("clickable").click(function(){
        // your code
    });
</script>
<script src="external library"></script>

如果您需要在 head 中导入外部库，请确保它在 window.onload 或 $(document).ready() 事件上执行，并将您的点击处理程序放在您想要定位的元素之后（通常放在 </body> 之前）（ ! 没有DOMReady 事件，否则它会在您的外部库代码之后触发）。

【讨论】：

【解决方案2】：

您可以尝试一些非常简单的方法，如果 click 函数已经定义，以如下方式捕获当前定义，然后执行前一个函数（如果存在）。

var _cp_click = $('.color-picker')[0].click;

$('.color-picker').click(function (event) {
    var target = event.target;
    var parent = $(target).parent()[0];
    var uncle = $(parent).siblings()[1];
    if (_cp_click != null) {_cp_click();}
    ///other code follows....
});

这将保留之前定义的点击函数，然后允许您定义自己的并在以后调用之前定义的版本。

【讨论】：