标签: pointer-events
即使指针事件:可见/绘制,SVG仍然会收到点击
基本上,我有几个.svg图像放在<img>我的HTML页面上的标签中,如下所示:
<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>
所有这些图像彼此重叠.它们具有相同的尺寸但内容不同.
我现在正试图只使这些图像的内容可以点击.
有pointer-events: visible;或pointer-events: painted;似乎可能的CSS,但我无法让它像那样工作.图像仍会在其中的每个点接收点击,而不仅仅是在内容部分.
我尝试pointer-events: none;了顶部图像并禁用了对顶部图像的点击,这听起来像HTML或CSS代码中没有错误.
我在Illustrator CC中使用透明背景创建了那些.svg图像,所以通常没有内容,我使用以下选项导出它:
(抱歉这是德语版) SVG设置图片http://s14.directupload.net/images/140318/reurfvoo.png
我不知道问题出在哪里.
推荐指数
解决办法
查看次数
如何仅通过带有指针事件的SVG传递点击？
我有一个SVG用按钮覆盖div。我知道我可以通过设置“ pointer-events：none;”来通过SVG传递鼠标事件。为我的SVG。但是，当我这样做时，SVG将不再识别鼠标事件。
<body>
<div id="website">
<form action="input_button.htm">
<p>
<textarea cols="20" rows="4" name="text"></textarea>
<input type="button" name="Text 1" value="show text"
onclick="this.form.text.value='Test'">
</p>
</form>
</div>
<div id="svgRect">
<svg width="1845" height="140">
<rect id="r0"></rect>
</svg>
</div>
</body>
我希望我的SVG能够识别鼠标何时位于其上方，但将点击传递到其下方的元素（div /按钮/ ...）。因此，我的SVG应该仅是悬停事件的目标，而我的按钮应该是单击事件的目标。
在其他一些方法中，我尝试过这样的方法：-没有任何效果。
.on("mousedown", function(d,i){
d3.select("#r0")
.style("pointer-events", "none");
d3.select("#website")
.style("pointer-events", "auto");}
.on("mouseup", function(d,i){
d3.select("#r0")
.style("pointer-events", "auto");
d3.select("#website")
.style("pointer-events", "none");
}
这个想法是当我按下鼠标按钮时禁用指针事件，并在释放它时再次启用它们。
有人知道这个问题的解决方案或解决方案吗？谢谢！
推荐指数
解决办法
查看次数
当检测到pointermove时，链接上的鼠标操作不会触发pointerup事件
如果鼠标在和之间移动，我无法pointerup在链接（A带有href属性集的标签）上触发事件。event.pointerType == 'mouse'pointerdownpointerup
我有以下场景：
var lastEvent = false;
var handler = function (e) {
if (lastEvent != e.type) {
e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
e.target.scrollTo(0, e.target.scrollHeight);
}
lastEvent = e.type;
}
document.querySelector('a').addEventListener('pointerdown', handler);
document.querySelector('a').addEventListener('pointermove', handler);
document.querySelector('a').addEventListener('pointerup', handler);div {
height: 100vh;
display: flex;
}
a {
height: 60vh;
width: 75vw;
margin: auto;
background-color: red;
display: inline-block;
user-select: none;
touch-action: none;
overflow-y: scroll;
}<div>
<a …推荐指数
解决办法
查看次数
仅单击 svg 蒙版中的孔
我有 svg 蒙版，它确定矩形中的孔。在 svg mask 后面我有一些可点击的元素，我想将事件传递给它们，但只能通过孔。我已经尝试过pointer-events值，但我只能使用整个掩码来传递事件或使用整个掩码来捕获它们。对于一个孔，可以使用剪切路径简单地完成，只需确定孔的外部部分，但多个孔会使事情变得更加困难。是否有可能避免使用剪辑路径？我也尝试pointer-events: visiblePainted过pointer-events: painted，但没有成功。
.background {
width: 400px;
height: 400px;
background: red;
cursor: pointer;
}
.svg {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}<button class="background">
</button>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" class="svg">
<defs>
<mask id="mask">
<rect
x="0"
y="0"
width="400"
height="400"
fill="white"
/>
<rect
x="20"
y="20"
width="40"
height="40"
fill="black"
/>
<rect
x="290"
y="290"
width="40"
height="40"
fill="black"
/>
</mask>
</defs>
<rect
x="0"
y="0"
width="400"
height="400"
fill="black"
opacity="0.5"
mask="url(#mask)"
pointer-events="auto"
/> …推荐指数
解决办法
查看次数
如何禁用除点击以外的所有鼠标事件？
我想禁用所有鼠标事件,除了点击,我有这个:
.info {
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
pointer-events: none;
background-color: rgba(26, 188, 156, 0.9);
}
但指针事件:无; 禁用所有事件.
推荐指数
解决办法
查看次数
PointerEvents：检测“穿过”元素的触摸
使用指针事件，我找不到正确的事件来触发智能手机上基于手指的触摸（使用 Chrome Android 和 Chrome Devtools 进行移动模拟测试）。
我需要什么：如果您在按住手指在屏幕上移动的同时触摸动作穿过一个元素，则会发生“悬停”事件。
也就是说，将手指放在元素外部，穿过它，只有在完全穿过元素后才向上移动手指。
我附加了一段代码片段以进行清除：我不需要蓝色元素的事件，我只需要片段中红色元素的相应“输入/输出”事件。示例 JS 代码将为鼠标触发，但在移动设备上它不会触发任何 console.infos。
var elem = document.querySelector(".element");
elem.addEventListener("pointerover", function() {
console.clear();
console.info("pointerover triggered");
});
elem.addEventListener("pointerenter", function() {
console.clear();
console.info("pointerenter triggered");
});
elem.addEventListener("pointerleave", function() {
console.clear();
console.info("pointerleave triggered");
});.outer {
width: 100px;
height: 100px;
border: 3px solid grey;
font-size: 12px;
color: white;
text-align:center;
touch-action: none;
}
.start {
position: relative;
top:0px;
left:0px;
width: 100px;
height: 20px;
background-color: blue;
}
.element {
position: relative;
top: 20px;
left: 0px;
width: 100px; …推荐指数
解决办法
查看次数
指针事件问题：带有压力输入（笔）的指针取消
提前谢谢你的帮助。我有点被我遇到的问题难住了。我正在使用 react 和 canvas 在 chrome 中开发一个 web 应用程序。此问题似乎是压力笔输入的PointerEvent问题。
问题：当我开始使用数位板和笔绘图时，即使笔仍然施加压力，也会在绘制一段短距离后触发指针取消事件。（使用鼠标时，这按预期工作，没有问题）
为了更好地描述问题，这是正在发生的事情的可视化。（.gif 以白屏开始）
第一行是笔输入的直线，我试图在屏幕上绘制，但正如您所看到的，即使笔压力仍在施加，它也被突然中断（这是触发 pointercancel 事件的地方） . 这也显示了在触发事件之前可能的区域大小。
第二个显示，只要我用笔输入停留在一个小区域，pointercancel 就不会触发，但是一旦我尝试离开该区域，pointercancel 事件就会被触发并停止绘制线条。
第三个显示来自鼠标的输入，能够在画布上移动而不会触发 pointercancel 事件。
解决此问题的任何帮助将不胜感激，它看起来确实从 chrome 55 开始支持此功能，所以我不确定是什么导致了指针取消被触发。
虽然我不认为它与问题真的相关，但如果它在这里是项目的代码，重新编写一个触摸只是为了使其更清晰。它不是很复杂，只是一个简单的画布来测试输入。
画布区域的 HTML 如下（它在 react 组件中）：
<div className="session-container">
<canvas ref="canvas" className="canvas"></canvas>
</div>
和 javascript，它都在 react 的一个组件中，如下所示：
componentDidMount() {
this.canvas = this.refs.canvas;
this.context = this.canvas.getContext("2d");
this.canvas.addEventListener('pointerdown', this.onDown, false);
this.canvas.addEventListener('pointerup', this.onUp, false);
this.canvas.addEventListener('pointercancel', this.onUp, false);
this.canvas.addEventListener('pointermove', this.onMove, false);
}
onDown(e) {
this.drawing = true;
current.x = e.clientX || e.touches[0].clientX;
current.y = e.clientY …推荐指数
解决办法
查看次数
检查左键或右键单击的指针事件方法
我已经通过pointerevents-polyfill配置了指针事件 。
我有一个问题，我无法区分左键单击和右键单击，其中右键单击导航项目将执行与左键单击相同的操作，而不是打开右键单击菜单。
我正在使用的特定事件是pointerup。
指针事件有没有办法检查事件是左键单击还是右键单击？
推荐指数
解决办法
查看次数
指针事件：无不适用于移动设备
我正在研究 Vue 的自定义拖放模块，我发现了一个问题。为了在指针向下覆盖浏览器D＆D（因为我需要），我正在克隆我想要拖动的div，然后触发pointermove（在此事件中，我在克隆的div上设置X和Y），当我向上触发指针时，该div的值被转移到拖动位置。为了在指针向上事件上将克隆（拖动）div 下的目标元素，我使用了 css 属性pointer-events: none（在克隆 div 上），并且桌面上的一切都很好。在移动设备上，事件定位总是拖动元素。
有来自触发事件的console.log： 记录的事件
推荐指数
解决办法
查看次数
Preventdefault 和 stoppropagation 不适用于指针移动
我正在制作一个在 HTML5 内绘制的应用程序canvas，但我无法从手机或平板电脑上执行此操作。
按下时无法避免浏览器的本机滚动或 chrome 刷新
我在jsfiddle中创建了一个示例，以便您可以看到它。
推荐指数
解决办法
查看次数
PointerEvent 在短时间内停止触发
我目前正在尝试获得与 Squid（笔记应用程序）类似的触摸/手写笔行为。我已经使用了PointerEventAPI，它一切正常，除了一个恼人的问题：在我放下手写笔或手指后，它会在接下来的约 0.3 秒内绘制一笔，但在那之后，pointermove只要指针向下。
这是我的代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style=" position: absolute;border: 2px solid red;"></canvas>
<script src="index.js"></script>
</body>
</html>
index.js
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white"
var pos = {}
canvas.addEventListener("pointerdown", function (e) {
pos.x = e.pageX;
pos.y = e.pageY;
});
canvas.addEventListener("pointermove", function (e) {
console.log(e.pressure)
switch (e.pointerType) {
case …推荐指数
解决办法
查看次数
标签 统计
pointer-events ×11
javascript ×10
css ×5
html ×4
click ×3
svg ×3
html5-canvas ×2
android ×1
dom ×1
events ×1
jquery ×1
mobile ×1
mouse ×1
smartphone ×1
stylus-pen ×1
visible ×1
vue.js ×1