如何使svg之外的div无法点击

Question

我有：

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

并且在div id svgcanvas内部，我正在生成名为svgroot的svg

问题是我希望用户单击svgcanvas及其svg，但是在工作区中的svgcanvas之外，我需要不可点击。

为此，我做了：

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

和

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

}

我还使用了pointer-events: none; 在#workarea中，但这也会使svgcanvas无法点击。 我想让svgcanvas可点击时无法点击工作区。

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;