我在加载 HTML 格式的 SVG 文件时遇到了一个奇怪的问题。我将点击事件附加到 SVG 文件中的特定元素,效果很好。但是,我还需要将鼠标和触摸事件附加到它的父 div。似乎 SVG 对象正在捕获鼠标事件,因此它们不会冒泡到父 div。因此,我尝试将 SVG 上的指针事件设置为无。在这种情况下,父 div 接收鼠标事件,但现在子 SVG 元素不再接收鼠标事件。我尝试将子 svg 元素设置为pointer-events: all,但它仍然没有获取鼠标事件。我在这里做错了什么?
以下是我嵌入 SVG 文件的方法:
<div
id="map"
ng-pinchable
scale-factor="2"
max-zoom="2"
>
<object data="./media/map.svg" type="image/svg+xml"
id="mapsvg" width="100%" height="100%"></object>
</div>
以下是我如何通过 JS 将事件添加到 SVG 元素:
//add event listeners to stations
var el = $scope.svgDoc.getElementById("station-test");
el.style.pointerEvents = "all";
el.addEventListener("mouseup",
function(){
$scope.stationClicked("some id");
}
);
}, false);
在这里,我将事件添加到保存 SVG 对象的父“ map ”div:
el.addEventListener("click", function(){ console.log("Hello World!"); });
el.addEventListener("mousedown", function(){ console.log("mousedown"); });
提前致谢!
最佳答案
好吧,到目前为止我无法弄清楚为什么 SVG 元素没有获得点击事件,所以我只是做了一个 JS 函数来迭代所有子元素,并将鼠标的位置与元素的边界矩形进行比较SVG 对象,本质上是按照我的预期重新创建了点击行为。
$scope.onClickMap = function(event){
console.log("on click map");
var markers = $scope.svgDoc.querySelectorAll('*[id^="station"]');
for(i=0;i<markers.length;i++){
console.log("found markers: ",markers[i]);
var rect = markers[i].getBoundingClientRect();
if(event.offsetX > rect.left)
if(event.offsetX < rect.right)
if(event.offsetY > rect.top)
if(event.offsetY < rect.bottom)
$scope.stationClicked("some id");
}
所以它现在对我有用,但我很想知道为什么点击事件没有按预期触发/冒泡,如果有人知道更好的方法来做到这一点。谢谢。
关于javascript - 捕获对象中 SVG 元素及其父容器 div 上的鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39925266/