how to make the div outside svg unclickable

Question

I have:

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

and inside div id svgcanvas i am generating the svg named : svgroot

The problem is that i want the user to click the svgcanvas and its svg, but outside svgcanvas in workarea i need to have unclickable.

for this i have done :

  #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
   }

and

#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;

}

I have also used pointer-events: none; in the #workarea but it also make svgcanvas unclickable. I want to have workarea unclickable while svgcanvas clickable.

Answer 1

也许<area shape="rect" coords="27,67,435,267" */insert cords of div here/* href="" alt="" title="">可以帮上忙吗？

Answer 2

我猜你可以做到这一点

#workarea{ cursor: default; }

#svgcanvas { cursor:pointer; }

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

Answer 3

这不是普通的CSS吗？

pointer-events: none;