带有 mousemove 的画布在下面的 div 中阻止链接答案

【问题标题】：Canvas with mousemove blocking links in div underneath带有 mousemove 的画布在下面的 div 中阻止链接
【发布时间】：2017-11-05 00:29:57
【问题描述】：

我在使用画布/鼠标移动时遇到问题。每当鼠标使用 mousemove 绘图/绘画工具移动时，我希望能够在整个页面上绘图，但也仍然单击出现在各种其他 div 中的文本链接。我遇到的问题是当前已修复的画布具有透明的背景颜色，并且设置为 100% 的宽度和高度以较低的 z-index 阻挡了下面的 div，这意味着无法单击链接。在画布上使用 pointer-events:none 不是解决方案，因为它会禁用鼠标移动效果。如果我使用要单击的链接使画布 z-index 低于 div，则绘图将仅出现在 div 之外。

我需要添加或更改哪些内容才能完成这项工作？我基本上只是想要一个具有鼠标悬停效果的功能网页，只要它移动就会在页面上绘制。

下面是我正在使用的脚本。这是一个例子http://jsfiddle.net/zAF4d/1/

$(function() {
var letsdraw = false;

var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;

var canvasOffset = $('#paint').offset();

$('#paint').mousemove(function(e) {
    if (letsdraw === true) {
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
    letsdraw = true;
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 0.5;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});

$(window).mouseout(function(e) {
    // bind to the window mouse up, that way if you mouse up and you're not over 
    // the canvas you'll still get the release of the drawing.
    letsdraw = true;
});
});

【问题讨论】：

标签： javascript jquery canvas draw mousemove

【解决方案1】：

你说：

我遇到的问题是当前已修复的画布具有透明的背景颜色，并且设置为 100% 的宽度和高度会以较低的 z-index 阻挡下方的 div，这意味着无法单击链接。在画布上使用 pointer-events:none 不是解决方案，因为它会禁用鼠标移动效果。如果我使用要单击的链接使画布 z-index 低于 div，则绘图将仅出现在 div 之外。

我认为您需要在画布上完成所有操作，或者使用 DOM 和某种 CSS 技巧/动画。

【讨论】：

【解决方案2】：

    $(function() {
var letsdraw = false;

var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');

。 . . //如果您的 div 每次都不相同，请确定相似的道具，以便您可以将其拉到画布上...by'ID' || '类' ...等等。

var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;

。 . .

**等。或者如果你不能出于任何原因拉出实际的 div，只需在此处传递参数...... 那么你可以在这里使用它们...*

喜欢制作碰撞模型以在其顶部绘制线条...

if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}

....**在绘图函数中

**'onclick' 事件监听器尝试 **

$(div)onclick function();

如果整个 div 被拉到这里，那么它将打开链接...但是即使你只拉了 div 的参数，如果链接坐标匹配，你也只需将点击坐标传递给 div

$(div)onclick function(){
load.page(url: <link>your link</>
}

抱歉，如果弄错了，没有一起运行

不过还是试试吧，希望对你有帮助；

【讨论】：