4

I am trying to remove the mouseover actions that happen over links and Rects.

I tried adding interactive: false to the joint.dia.Paper object - this does not help fully. I still see changes on mouse over. I want link (especially) to not respond on mouse over.

How do I achieve this?

A.D
  • 1,480
  • 2
  • 18
  • 33
  • You could add an event listener to links and rects container that will handle `onmouseover` event. If an `mouseover ` event occurs on any element you don't want to, then you block it by returning `false`. I hope I get your problem correctly. – sunpietro Jul 10 '15 at 19:11
  • @sunpietro the jointjs documentation does not show how to add `onmouseover` listener. Could you please show an example? I am able to detect changes using `link.on('change:vertices', someChange)` (that calls the `someChange` function when the vertices have been dragged. How can I do that for mouseover? – A.D Jul 10 '15 at 19:19
  • 1
    Isn't this just a CSS thing? Simply remove any hover CSS properties... – Mike Goodwin Jul 11 '15 at 07:44

1 Answers1

3

To understand this you have to understand how the SVG markup for links is built up. The documentation explains it pretty well:

http://jointjs.com/tutorial#link-styling

If you need to check in more detail about the CSS class structure, I find it useful to use Inspect Element on your browser.

Once you understand this you will see that you can do what you are asking for using CSS. For a demo look here:

http://jsfiddle.net/azt8jpam/1/

For links you need to set display: none on the connection-wrap, link-tools, marker-vertices and marker-arrowhead classes.

For completeness you could also set cursor: auto on the shapes. For example

.element.basic.Rect {
    cursor: auto
}
Mike Goodwin
  • 8,810
  • 2
  • 35
  • 50