Ich habe:

<div id="workarea"> <style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style> <div id="svgcanvas" style="position:relative"> </div> </div>

Und innerhalb von div id svgcanvas generiere ich das svg mit dem Namen: svgroot

Das Problem ist, dass ich möchte, dass der Benutzer auf die svgcanvas und ihre svg klickt, aber außerhalb von svgcanvas im Arbeitsbereich muss ich nicht klickbar sein.

Dafür habe ich getan:

  #svgcanvas {
        line-height: normal;
        display: inline-block;
        background-color: #A0A0A0;
        text-align: center;
        vertical-align: middle;
        width: 640px;
        height: 480px;
        -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
        position: relative;
        /* 
          A subtle gradient effect in the canvas.
          Just experimenting - not sure if this is worth it.
        */.... so on
   }

Und

#workarea {
    display: inline-table-cell;
    position:absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    right: 14px;
    background-color: #A0A0A0;
    border: 1px solid #808080;
    overflow: auto;
    text-align: center;

}

Ich habe auch pointer-events: none; im #workarea verwendet, aber es macht auch svgcanvas nicht klickbar. Ich möchte, dass der Arbeitsbereich nicht anklickbar ist, während svgcanvas anklickbar ist.

0
Zeeshan 6 Dez. 2013 im 18:34

3 Antworten

Beste Antwort

Sie können das tun, denke ich

#workarea{ cursor: default; }

#svgcanvas { cursor:pointer; }

$("#svgcanvas").click(function() { //do your stuff });

0
Venkatesh Nadar 6 Dez. 2013 im 15:03

Vielleicht könnte <area shape="rect" coords="27,67,435,267" */insert cords of div here/* href="" alt="" title=""> helfen?

0
joostmakaay 6 Dez. 2013 im 14:37

Ist das nicht einfach nur CSS?

pointer-events: none;
0
john ktejik 24 Okt. 2014 im 21:58