Question

我有一个按钮A. Onclick，我正在使用一个js库做行为B. 我想做行为C然后执行行为B.无论如何我在行为B之前注入行为C？

当我尝试覆盖onclick事件时，只会执行C行为。 B没有。

更具体地说，我使用虹膜颜色选择器作为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？

Answer 1

在导入库之前，只需先放置addEventListener即可首先触发回调。

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

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

Answer 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....
});

这将保留先前定义的单击函数，然后允许您定义自己的单击函数，然后调用先前定义的版本。

如何向默认的点击行为添加其他行为？

2 个答案: