父级的点击事件,如何排除分类按钮区域<div class="card-event" @click="linkGameInfo(item.id)"> <!--卡片中"标题"区域--> <div class="title">{{ item.title }}</div> <!--卡片中"分类按钮"区域--> <div> <el-tag v-for="type in item.typeList" :key="type" type="info" style="margin-left: 2px"> {{ type }} </el-tag> </div> </div>
时间: 2023-07-21 08:00:36 浏览: 40
您可以使用事件修饰符来排除分类按钮区域的点击事件。在父级元素中添加一个事件修饰符,通过事件对象的`target`属性来判断点击的元素是否属于分类按钮区域。如果是,则不执行点击事件。以下是一个示例代码:
```html
<div class="card-event" @click="linkGameInfo(item.id, $event)">
<!--卡片中"标题"区域-->
<div class="title">{{ item.title }}</div>
<!--卡片中"分类按钮"区域-->
<div>
<el-tag v-for="type in item.typeList" :key="type" type="info" style="margin-left: 2px">
{{ type }}
</el-tag>
</div>
</div>
```
```javascript
methods: {
linkGameInfo(id, event) {
if (!event.target.classList.contains('el-tag')) {
// 执行点击事件
// your code here
}
}
}
```
在上述代码中,我们使用了`classList.contains('el-tag')`来判断点击的元素是否包含`el-tag`类名,即分类按钮区域。如果不包含该类名,则执行点击事件。
相关问题
cardHtml += '<div class="card" id="card'+v.id+'" style="padding: 5px 0;cursor:pointer;" onClick="tagContent(event)">' cardHtml += ' <span class="card_num">'+v.num+'</span>' cardHtml += ' <span class="card_unit">'+v.unit+'</span>' cardHtml += ' <p class="card_title">'+v.title+'</p>' cardHtml += '</div>'点击内部元素不能出发div的点击事件
点击内部元素无法触发包裹它的div的点击事件。这是因为在事件冒泡过程中,点击事件会从内部元素逐级向外层元素冒泡,直到最外层元素。但是,如果内部元素有自己的点击事件,并且阻止了事件冒泡,那么点击事件就不会继续向外层元素冒泡,从而无法触发包裹它的div的点击事件。
解决这个问题的一种方法是,在内部元素的点击事件处理函数中添加一行代码来手动触发包裹它的div的点击事件。例如,可以使用JavaScript中的`dispatchEvent()`方法来模拟触发点击事件,具体代码如下:
```javascript
function tagContent(event) {
// 处理内部元素的点击事件
// ...
// 触发包裹它的div的点击事件
event.currentTarget.dispatchEvent(new Event('click'));
}
```
这样,当内部元素被点击时,会先执行内部元素的点击事件处理函数,然后手动触发包裹它的div的点击事件,从而实现点击内部元素也能触发div的点击事件。
function createLink( file, tags ) { const external = Array.isArray( tags ) && tags.includes( 'external' ) ? ' <span class="tag">external</span>' : ''; const template = ` <div class="card"> <a href="${ file }.html" target="viewer"> <div class="cover"> <img src="screenshots/${ file }.jpg" loading="lazy" width="400" /> </div> <div class="title">${ getName( file ) }${ external }</div> </a> </div> `; const link = createElementFromHTML( template ); link.querySelector( 'a[target="viewer"]' ).addEventListener( 'click', function ( event ) { if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return; selectFile( file ); } ); return link; }
这段代码是用来创建一个链接的函数,其中包含了文件名和标签。如果标签数组中包含 "external",则添加一个外部链接的标签。代码模板中包含一个卡片div,其中包含了一个图片和一个标题,图片路径为文件名加上 .jpg 后缀,标题为文件名去掉后缀加上可能的外部链接标签。通过createElementFromHTML函数创建一个链接元素,并添加了一个点击事件监听器,当左键点击链接时,会调用selectFile函数并传入文件名作为参数。最后返回创建的链接元素。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)