javascript - 冒泡鼠标事件到chart.js的父 Canvas

我通过使用在图表上方移动的div在chart.js图表​​上实现了自定义工具提示。我的工具提示以某种方式捕获了可能发生的鼠标事件，但我想将其传播到父元素图表，以便正确更新数据点并重新定位工具提示。我没有怎么做，因为大多数人都在尝试相反的做法。如您所见，我尝试通过直接在图表上调用emit来尝试冒泡，或者就像在代码中仅调用emit一样。

工具提示模板如下所示：

<template>
<div :style="computedStyle" class="tooltip" @mouseover="$emit('mouseover')" @mousemove="$emit('mousemove')">
    <div ref="tooltip-background" v-html="svg" class="tooltip-background"/>
    <div class="tooltip-content">
        <div v-for="item of this.items">
            <div class="tooltip-content-values">
                <span class="">User activity: </span>
                <span class="tooltip-content-values-value">{{item.value}}</span>
            </div>
        </div>
        <div class="tooltip-content-date">{{date}}</div>
    </div>
</div>
</template>

<style scoped>
.tooltip {
    position: absolute;
    width: 300px;
}

.tooltip-background {
    width: 300px;
    position: absolute;
    z-index: 1
}

.tooltip-content {
    position: absolute;
    z-index: 2;
    margin-left: 25px;
    margin-top: 3px;
    padding: 15px;
}

.tooltip-content-values {
    font-family: Work Sans, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #666666;
}

.tooltip-content-values-value {
    font-family: Work Sans, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #111111;
}

.tooltip-content-date {
    margin-top: 5px;
    font-family: Work Sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #666666;
    opacity: 0.5;
}
</style>

最佳答案

防止鼠标事件发生在元素上并因此使其成为后面元素的一种简单方法是使用CSS属性pointer-events

对于您的情况，只需在工具提示类中将属性设置为none即可：

.tooltip {
    pointer-events: none;
    position: absolute;
    width: 300px;
}