Javascript 排列元素单击优先级

我有以下代码：（JSFIDDLE:）

身体，
html{
宽度：100%；
身高：100%；
边界：0；
填充：0；
保证金：0；
溢出：隐藏
}
.一切{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
}
.mainimgimg{
宽度：100%；
身高：100%；
}
梅因先生{
宽度：50vh；
高度：50vh；
职位：相对
}
#帆布{
位置：绝对位置；
排名：0；
左：0；
}
var canvas=document.createElement（“canvas”）；
变量宽度=内部宽度；
变量高度=内部高度；
var ctx=canvas.getContext（'2d'）；
画布宽度=宽度；
canvas.id=“canvas”；
canvas.height=高度；
ctx.fillStyle=“绿色”；
ctx.fillRect（0,0,50,50）；
ctx.fillRect（宽度/2，高度/2，50，50）；
window.onload=函数（）{
document.body.appendChild（画布）；
document.body.style.margin=“0”；
document.body.style.overflow=“隐藏”；
};
canvas.onclick=function（）{
警报（“画布已调用，但不应该”）；
}
var smile=document.getElementsByClassName（“mainImg”）[0]；
smile.onclick=function（）{
警惕（“应该叫我”）；
}

我有一个以浏览器为中心的图像，还有一个位于绝对位置的画布，分布在整个屏幕上。 至于显示，画布的显示优先级高于图像，这就是我想要的，因为我使用画布的一些透明部分来显示图像

问题在于单击优先级：正如您所看到的，当您单击笑脸图像时，canvas的click函数被调用，因为它在整个屏幕上传播。但就点击优先级而言，我希望我的图像被调用。能做到吗

谢谢您的时间，我非常感谢。

如果您添加到

#canvas

规则，它将通过单击传递到图像

---

事件不能冒泡，因为图像和画布位于不同的不相关元素中。如果将画布放置在与图像相同的包含元素中，单击事件将从一个冒泡到下一个冒泡

另外，最好使用

addEventListener

，而不是直接将事件侦听器分配给

onclick

属性

在HTML中

<div class="everything">
    <div class="mainImg" id="contain">
        <img src="smile.png">
    </div>
    <!-- this is where the canvas will go -->
    <div id="canvasContainer"></div> <!-- add this div to hold the canvas -->
</div>

当您执行此操作并且希望画布首先获取事件时，必须将事件捕获标志设置为

true

canvas.addEventListener("click",canvasEvent,true); // last argument true

如果将其设置为

false

canvas.addEventListener("click",canvasEvent,false); // last argument false
// or
canvas.addEventListener("click",canvasEvent); // or defaults to false

然后图像元素（画布下）将首先获取事件

事件侦听器

function imageEvent(e){ alert("Image") } // not much to do 
// the canvas event you need to either prevent the event bubbling
// or let it through depending on what your needs are.
function canvasEvent(e){
    if( /*only for canvas */){
       alert("Canvas handling it");
       e.cancelBubble = true;
    }else{
       alert("Canvas is passing the event onto the image");
    }
};

---

你可以在画布上添加另一个元素来接受点击。在你的小提琴中，我永远不会触发simle.onclick，也就是说，我总是只从画布上获得警报。onclickemanek，这正是我所说的问题。。。请再读一遍我的帖子。alexander-对不起，我不太明白。当我点击小提琴时，我只能得到类似于

“我应该被调用”

，而从未得到类似于

“画布调用的警报，尽管它不应该”

。。仅供参考-我正在使用Chrome。我刚刚在这里分离了css和javascript——从我在小提琴中看到的内容来看，图像的显示优先级高于画布，因此画布是不可见的，这就是为什么你会看到“我应该被调用”。我希望我的画布是可见的，并在更高的显示优先级，但只是不超过点击事件的笑脸。只要将整个代码嵌入到一个.html文件中，您就会看到我得到的结果。@RunningFromShia在您单击单词pointer events时用一个链接更新了我的答案，但简单地说，

pointer events:none

会从元素中删除鼠标事件，因此它的行为就好像根本不存在一样。

canvas.addEventListener("click",canvasEvent,false); // last argument false
// or
canvas.addEventListener("click",canvasEvent); // or defaults to false

function imageEvent(e){ alert("Image") } // not much to do 
// the canvas event you need to either prevent the event bubbling
// or let it through depending on what your needs are.
function canvasEvent(e){
    if( /*only for canvas */){
       alert("Canvas handling it");
       e.cancelBubble = true;
    }else{
       alert("Canvas is passing the event onto the image");
    }
};