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