JavaScript中的SVG形状上的鼠标右键单击检测不起作用

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" pointer-events="all"></rect>
</svg>

const svgElement = document.querySelector('svg');
svgElement.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  console.log('Right click detected on SVG element');
});

<svg width="100" height="100" oncontextmenu="handleRightClick(event)">
  <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg><script>
function handleRightClick(event) {
  event.preventDefault();
  console.log('Right click detected on SVG element');
}
</script>