Получать клики через html-холст

Ответ 1

Если кросс-браузерная функциональность не является требованием, тогда есть простое решение. В браузерах, которые поддерживают его для не SVG-элементов (webkit, Mozilla и, возможно, других, но особенно не IE), вы можете использовать свойство css, называемое указателями-событиями. Из MDN:

"Указатель-указатель свойств CSS позволяет авторам контролировать, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может стать объектом событий мыши. Когда это свойство не указано, те же характеристики значения visiblePainted применяются к содержимому SVG.

В дополнение к указанию на то, что элемент не является объектом событий мыши, значение none указывает, что событие мыши переходит "через" элемент, а объект цели "находится под ним".

Предупреждение. Использование указателей-событий в CSS для элементов, отличных от SVG, является экспериментальным. В настоящее время в спецификации проекта CSS3 UI определено обсуждение, чтобы отложить его до CSS4. "

По крайней мере, вы можете использовать Modernizr для обнаружения поддержки указателей-событий и выполнить трюк непрозрачности, упомянутый в Саймон Саррис, в браузерах, которые его не поддерживают.

Кроме того, если ваше приложение специфично для карт Google, вы можете вставить свой холст в качестве наложения карт Google, тем самым избегая проблемы вместе.

Пример: http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php

Ответ 2

Предполагая, что вы не можете поместить ссылки над холстом...

Для новых/достойных браузеров просто используйте этот CSS:

#canvas { pointer-events:none; }

И грязный обходной путь для IE + старых браузеров (вы можете удалить зависимость от jQuery):

jQuery('#canvas').click(function(e) {
    window.location = jQuery('#element-under-canvas').attr('href');
});

Очевидно, что это поддерживает только привязки, поскольку вы должны знать конкретный элемент под холстом (или можете найти его с помощью магии селектора jQuery).

Ответ 3

Ну, короткий ответ заключается в том, что вы не можете пройти через клик.

Но второй самый короткий ответ заключается в том, что вы действительно можете делать все, что желает ваше сердце! Вам просто нужно быть немного странным в решении.

Первый способ, о котором я могу думать, слегка сумасшедший, но легкий: для каждого предмета за холстом сделайте подобный секретный предмет перед холстом. Затем поставьте нужное событие на секретный элемент:

<!-- A visible button behind the canvas -->
<button id="but" type="button" style="position: absolute; top: 100px; left: 100px;">Click Me!</button>

<canvas id="can" width="500" height="500" style="position: absolute;"></canvas>

<!-- A near copy of the visible button, but this one is invisible and in front of the canvas! -->
<button id="but" type="button" onclick="alert('click!')" style="position: absolute; top: 100px; left: 100px; opacity: 0;">Click Me!</button>

Если вы хотите увидеть этот код в действии нажмите здесь

Есть несколько более сумасшедших, но более удобных способов, если у вас есть сто вещей за холстом, который вы хотите кликать, но это, наверное, проще всего, если у вас всего 1-3 вещи, которые вы хотите щелкните за холстом.

Ответ 4

Я смог выполнить это, установив холст следующим образом:

<div>
    <a href='#'>my link</a>
    <canvas></canvas>
</div>

Затем я установил его в CSS:

canvas {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index:-1; /* NOT SURE HOW SUPPORTED THIS IS, IT WORKED IN CHROME */
}

Ссылка в div была доступна для кликов, независимо от того, что я нарисовал на холсте во время выполнения.

Надеюсь, это поможет!

Ответ 5

Заимствование из Саймона Сарриса отвечает: в некоторых ситуациях может быть проще, если холст и элементы управления будут находиться на одной плоскости. В зависимости от элемента управления он не всегда позволяет холсту рисовать поверх элемента управления, но это, похоже, не требуется в оригинальном вопросе Джо. Важно убедиться, что холст и элементы управления находятся на одной плоскости Z, оба имеют стиль, используя ключевое слово "position", а HTML-код для элементов управления - после оператора canvas. Ниже приведен пример холста в сочетании с элементами управления с использованием этого метода.

<canvas id="can" width="500" height="500" style="z-index:2; position: absolute;"></canvas>
<!-- Put text and a link on the same plane as the canvas -->
<div style="position: relative; z-index: 2;">
   <a href="http://www.google.com/">Click</a> this Google link.
</div>

Ответ 6

Я не уверен, как процедура для этого идет, но Саймон Саррис фактически предоставил решение в комментариях:

К сожалению, мой другой метод не будет работа в этом случае.:( Однако, вы все еще может испортить у вас есть что-то близкое к тому, что вы хотеть. Вот пример прозрачного карта, показывающая холст за ним. Это выглядит так, как будто зеленый квадрат сверху но это действительно показывает: jsfiddle.net/un9yW/11 Конечно, этот метод означает, что нет способа сделать зеленый ящик, чтобы полностью покрыть часть карты и т.д., которая вид хромой. Я дам вам знать, если я думать о чем-нибудь еще, что будет работать для вашей ситуации. - Саймон Саррис 7 часов назад

Ответ 7

Вот как я решил эту проблему...

У меня есть устройство с круглым пользовательским интерфейсом (нарисованное на простом холсте HTML5, который представляет собой квадрат). Только круг окрашен, остальная часть холста прозрачна, и я хочу щелкнуть по нему. Под углами квадратного холста имеются формы на кинетической стадии JS.

Обычно вы не можете щелкнуть по холсту.

Но вы можете отправить событие click в кинетическую форму и активировать прослушиватели событий в этой форме следующим образом:

    $( '#myCanvasUserInterfaceLayer' ).on( 'click', function( e ) {

        var pos = getMousePos( e );
        var obscuredKineticShape = kineticLayer.getIntersection( pos );

   // (Note: console.log(obscuredKineticShape) and you find that 
   // 'getIntersection' returns an object with the topmost shape 
   //  at the click point on the kinetic stage within it, called 'shape').

        obscuredKineticShape.shape.fire( 'mousedown' ); 

    });

     function getMousePos( e ) {

        return {
          x: e.pageX,
          y: e.pageY
        };
      }

Ответ 8

Я думаю, что лучше менять z-индекс динамически. Если вам нужно использовать элементы управления, установите их z-индекс выше холста. Если вам нужно использовать холст - установите его z-index выше, чем элементы управления. Точный способ, как это сделать, зависит от вашей ситуации. Вы можете слушать события mousedown/mouseup или mousemove в некоторых областях.