js如何判断点击元素是否是某一父元素的子元素

js如何判断点击元素是否是某一父元素的子元素

解决办法:
parentNode.contains(childNode)

举例:
vue中,判断当前点击的元素是否为this.$refs.nabiation的子元素

document.addEventListener('click', (event) => {
  console.log(this.$refs.naviation !== event.target && this.$refs.navigation.contains(event.target))
})
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 你可以使用 fabric.js 中的 `event.target` 属性来判断用户是否点击的是某个元素子元素。 首先,你需要为 canvas 绑定一个 "mousedown" 事件。然后你可以通过检查 `event.target` 属性是否为某个元素子元素判断是否点击的是该元素子元素。 例如: ```javascript canvas.on('mouse:down', function(event) { if (event.target) { // event.target 代表用户点击元素 var clickedElement = event.target; // 检查是否为某个元素子元素 if (clickedElement.isContainedWithinObject(someElement)) { // 点击的是 someElement 的子元素 } } }); ``` 注意:在这里,`someElement` 是你想要判断元素。 希望这能帮到你! ### 回答2: 在fabric.js中,我们可以通过判断事件对象的target属性来判断是否点击的是canvas中的某个元素子元素。 首先,我们需要在canvas上添加一个事件监听器,监听鼠标点击事件。当事件触发时,事件对象会包含target属性,这个属性指向被点击元素。 如果我们要判断点击的是某个元素子元素,可以通过递归的方式遍历这个元素的所有子元素,然后判断事件对象的target属性是否与其中的某个子元素相同。 下面是一个示例代码: ```javascript // 创建一个canvas元素 var canvas = new fabric.Canvas('c'); // 添加点击事件监听器 canvas.on('mouse:down', function(event) { var target = event.target; if(target && target.subTarget) { console.log("点击的是元素子元素"); } else { console.log("点击的是元素本身或者其他地方"); } }); // 创建一个父元素和一个子元素 var rect1 = new fabric.Rect({ left: 50, top: 50, width: 100, height: 100, fill: 'red' }); var rect2 = new fabric.Rect({ left: 60, top: 60, width: 80, height: 80, fill: 'blue' }); rect1.subTarget = rect2; // 把子元素添加到父元素上,并将父元素添加到canvas上 rect1.add(rect2); canvas.add(rect1); ``` 在上面的示例中,我们创建了一个父元素rect1和一个子元素rect2,然后把子元素添加到父元素上,并将父元素添加到canvas上。当点击canvas时,如果点击的是子元素rect2,那么控制台会输出"点击的是元素子元素";如果点击的是父元素rect1,或者其他地方,控制台会输出"点击的是元素本身或者其他地方"。 通过这种方式,我们可以判断点击是否是canvas中某个元素子元素。 ### 回答3: 在fabric.js中,要判断个元素是否为Canvas中的子元素,可以使用以下的方法: 1. 获取点击事件的坐标位置。监听点击事件,获得鼠标点击的坐标位置,可以通过使用`e.clientX`和`e.clientY`获取。 2. 利用`fabric.js`的`fabric.util`工具类中的`getKlass`方法,通过click事件坐标找到点击元素。 3. 判断点击元素是否为Canvas中的子元素。通过`obj.findTarget()`方法来找到canvas中的子元素。 下面是一个示例代码: ```javascript canvas.on('mouse:down', function(e) { var clickX = e.e.clientX; var clickY = e.e.clientY; var target = canvas.findTarget(e.e); var subElement = target.findTarget(clickX, clickY); if (subElement) { console.log('点击的是某个元素子元素'); } else { console.log('点击的不是任何元素子元素'); } }); ``` 通过监听`mouse:down`事件,获取点击坐标后,使用`findTarget`方法找到点击元素,再使用`findTarget`方法查找该元素子元素。如果找到了子元素,则可以判断点击的是某个元素子元素。 希望能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值