如何使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;

}

我在#workarea中也使用了pointer-events: none;，但它也让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;