CODEWITHSUNDEEP
javascriptcsshtmlsvg
Zeeshan
Zeeshan

Reputation: 886

how to make the div outside svg unclickable

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.

Upvotes: 0

Views: 1016

Answers (3)

john k
john k

Reputation: 6615

Isn't this just plain CSS?

pointer-events: none;

Upvotes: 1

Venkatesh Nadar
Venkatesh Nadar

Reputation: 142

You can do by this I guess

#workarea{ cursor: default; }

#svgcanvas { cursor:pointer; }

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

Upvotes: 0

joostmakaay
joostmakaay

Reputation: 437

Maybe <area shape="rect" coords="27,67,435,267" */insert cords of div here/* href="" alt="" title=""> could help out?

Upvotes: 0

Related Questions