# How to override click.delegate in a Custom Attribute

**URL:** <https://discourse.aurelia.io/t/how-to-override-click-delegate-in-a-custom-attribute/3889>\
**Category:** Help Requests\
**Created:** [November 19, 2020, 9:34am UTC](https://discourse.aurelia.io/t/how-to-override-click-delegate-in-a-custom-attribute/3889 "2020-11-19T09:34:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sousekd](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sousekd/32/1705_2.png) [@sousekd](https://discourse.aurelia.io/u/sousekd)\
**Post date:** [November 19, 2020, 9:34am UTC](https://discourse.aurelia.io/t/how-to-override-click-delegate-in-a-custom-attribute/3889/1 "2020-11-19T09:34:14Z")

</div>

Hi,

I would like to develop a custom attribute, in which I want to override the original click.delegate binding by doing something before and after the original callback. Can someone help?

What I have done before to observe value binding changes in a custom attribute is this:

```auto
created(owningView) {
  this.valueBinding = owningView.bindings.find(b => b.target === this.element && b.targetProperty === 'value');
}

enabled() {
  this.valueBinding.targetObserver.subscribe(...);
}

```

I was wondering whether this is the path to investigate or if there is another way to achieve what I need.

EDIT: I only need this for `HtmlButton`, if this would make things considerably easier. An alternative solution would be to use the custom attribute to bind the click handler instead of the typical `click.delegate`, so instead of `<button click.delegate="doSomething()" my-custom-attribute>` I would do `<button my-custom-attribute="doSomething()">`, but somehow the original approach looks nicer to me.

Thanks a lot!  
David

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 21, 2020, 2:59am UTC](https://discourse.aurelia.io/t/how-to-override-click-delegate-in-a-custom-attribute/3889/2 "2020-11-21T02:59:06Z")

</div>

We can  
(1) Find the binding that is a click listener, with `delegate` strategy:

```auto
import { Listener, delegationStrategy } from 'aurelia-framework';

created(owningView) {
  this.valueBinding = owningView.bindings.find(b =>
    b instanceof Listener
    && b.target === this.element
    && b.delegationStrategy === delegationStrategy.bubling
  );
}

```

(2) Patch the `callSource` method of that binding, with your custom code:

```auto
// keep a reference to the original
const originalCallSource = valueBinding.callSource;
valueBinding.callSource = function(event) {
  // before handling click event code
  console.log('before calling view model click handler');
  const result = originalCallSource.call(valueBinding);
  console.log('after calling view model click handler');
  return result;
}

```

In (1), the reason we check with 3 conditions is because some one can have this on an element:

```auto
<div
  click.trigger="callTrigger($event)"
  click.delegate="callDelegate($event)">

```

---

<div class="post-metadata">

**Author:** ![sousekd](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sousekd/32/1705_2.png) [@sousekd](https://discourse.aurelia.io/u/sousekd)\
**Post date:** [November 23, 2020, 10:28am UTC](https://discourse.aurelia.io/t/how-to-override-click-delegate-in-a-custom-attribute/3889/3 "2020-11-23T10:28:47Z")

</div>

Thanks a lot, this is exactly what I was looking for!