我的页面有很多个动态创建添加的div,有共同的类名tag 和不同的类名tag${index},我现在这个操作是放在tinymce编辑器里面的,我怎么在editor.on的时候判断当前的点击事件是不是在具体的某个tag${index}外面的呢,庆举例写出代码
时间: 2024-09-13 07:18:10 浏览: 32
在TinyMCE编辑器中,要判断点击事件是否发生在具有特定类名的元素之外,可以通过监听点击事件并检查事件的目标元素来实现。如果你想要判断点击是否在具有共同类名`tag`以及动态类名`tag${index}`之外,可以利用事件冒泡的原理和DOM树的结构来进行判断。
以下是一个示例代码,用于检查点击事件是否在指定的`tag${index}`类的元素外面:
```javascript
editor.on('click', function(event) {
// 获取触发事件的元素
var target = event.target;
// 循环遍历目标元素的父节点,直到找到编辑器的body或者找到具有tag${index}类的元素
while (target !== editor.getBody()) {
// 检查目标元素或其父节点是否包含tag${index}类
if (target.classList.contains('tag') && target.classList.contains('tag' + index)) {
// 如果找到,则说明点击事件是在tag${index}类的元素内部发生的
console.log('点击发生在tag' + index + '内部');
return; // 结束函数执行
}
// 移动到目标元素的父节点
target = target.parentNode;
}
// 如果循环结束都没有返回,则说明点击事件是在tag${index}类的元素外面发生的
console.log('点击发生在tag' + index + '外部');
});
```
在上述代码中,我们首先检查事件的目标元素,然后向上遍历DOM树,直到到达编辑器的根元素(`editor.getBody()`)。在此过程中,我们会检查每个元素是否包含特定的类名`tag${index}`。如果在达到编辑器根元素之前找到了这个类名,那么点击事件就是在该元素内部发生的;否则,点击事件是在元素外部发生的。