Javascript 如何使自定义vue指令中的逻辑仅在单击该元素时运行？

现在，我连接到任何元素的指令在页面加载时执行。 这不是我想要的。我希望在单击该元素时运行该指令。 我怎么能做这样的事

  directives: {
            'new-dir': {
                bind(el, binding, vnode) {
                    el.style.cursor = "pointer";
                    console.log(vnode);
                    if(vnode.tag == 'div'){
                                ...something       }
                    else if(vnode.tag == 'a') {
                      console.log("its a link and clicked");
                      if(vnode.data.attrs.target == "_blank"){
                        console.log("external link");
                      } else{
                        console.log("internal link");
                      }
                    } else if(vnode.tag == 'input') {
                       console.log("its an input ");
                       console.log("type = " + vnode.data.attrs.type)
                       console.log("placeholder = " + vnode.data.attrs.placeholder);
                    }
                }
            },
  }

---

指令必须绑定到元素，并且指令代码在该时间运行

如果希望特定逻辑在单击处理程序中运行，则需要注册一个

指令：{
“新目录”：{
绑定：el=>{
el.style.cursor=“指针”
},
插入：（el，绑定，vnode）=>{
//在元素上存储对单击处理程序的引用
//这主要是为了您以后可以删除它
el.newDirClickHandler=e=>{
console.log（vnode）；
if（vnode.tag==“div”）{
//某物
}
如果（vnode.tag=='a'）{
log（“这是一个链接，点击了”）；
if（vnode.data.attrs.target==“\u blank”）{
控制台日志（“外部链接”）；
}否则{
控制台日志（“内部链接”）；
}
}
if（vnode.tag=='input'）{
log（“它是一个输入”）；
console.log（“type=“+vnode.data.attrs.type”）
console.log（“占位符=“+vnode.data.attrs.placeholder”）；
}
}
//注册单击处理程序
el.addEventListener（“单击”，el.newDirClickHandler）
},
解除绑定：el=>{
//取消注册单击处理程序
el.removeEventListener（“单击”，el.newDirClickHandler）
}
}
}

是什么让您想为此使用指令？在相同的情况下，我可能会添加一个

v-on:click

listener。但是我正在创建一个自定义指令，因为我希望使用vnode访问元素上的数据，并将其作为参数传递给另一个函数。我计划广泛使用这个指令。我不想创建一个on：单击，然后将一个函数挂接到它，并为每个元素传递参数。这是为了减少重复相同内容的代码和时间（键入代码）。谢谢您的回复。我们为什么要解开点击处理程序？它正在清理。