I have a tree layout with children and sub-children. This layout supports collapsing. On click of any node, it will collapse and on second click on it it will expand. I want to avoid this effect for certain nodes. How can I do it?
The collapse/expand action is triggered through the .click handler. If you want to disable it, have an empty handler for those nodes. The code would look something like this.
nodes.on("click", function(d) {
if(d.condition) {
// handler for collapsing/expanding
}
// if condition is not met, do nothing on click
});
One way to accomplish this is to disable pointer events for nodes that you don't want to respond to click handlers.
nodes
// Make sure all nodes' pointer events are reset to 'all'.
.attr('pointer-events', 'all')
// Filter the nodes based upon a condition.
.filter(function(d) { return d.condition; })
// Set the pointer events for the filtered nodes to 'none'.
.attr('pointer-events', 'none');
This has the added benefit of having nodes that should not respond to clicks also not respond to other mouse events such as mouseover, if that's the behavior you want. If your nodes that shouldn't respond to clicks need to respond to mouseover/mouseout events for instance, go with Lars' solution.
Related
When implement a big file system tree in NSOutlineview, it lacks an event notification when user click the left side down arrow triangle icon of a node. This is very important when lazy-loading a large amount of file nodes into a directory node and represent it into NSOutlineview. Otherwise, developer have to load entire directory into it, in this way, the loading will force end user to wait, this is not acceptable. In short, current version of NSOutlineview can't implement lazy-loading caused by this issue. Does anyone meet this issue or have an alternative solution to implement a Finder-like treeview with Cocoa NSOutlineview, any help will be great appreciate.
In Addition:
NSOutlineview does not emit an outlineViewItemWillExpand event when click the icon, and there still lacks enough info to get which node will expand even that event emitted, [NSOutlineview selectedRow] can't work because the node which will be expanded have not been selected yet.
I load my child nodes in the following call in NSOutlineViewDataSource:
func outlineView(_ outlineView: NSOutlineView, isItemExpandable item: Any) -> Bool {
guard let node = item as? Node else { return false }
return node.children.count > 0
}
The children property of my Node class is lazy, and hence forced to load here.
This method is only called on Nodes that are visible in the outliner. This way you are only loading one layer ahead of the visible tree. The disclosure triangle (expand arrow) will then be visible if children exist.
If you have an efficient way to know the number of children a node has without actually loading them, then it may be better just to return the child count in outlineView(_: isItemExpandable:) and then do the actual load in outlineViewItemWillExpand(_:) as Willeke has suggested in the comments.
In D3, if you defined a drag function like this:
var drag = d3.behavior.drag()
.on("drag", function () {alert("drag")})
.on("dragend", function () {alert("dragEnd")});
You really cannot do the following:
d3.select("#text1")
.on("click", function(d,i) {alert("clicked")})
.call(drag);
Reason is that the click will get fired after that the "dragend" will fire . In my opinion there should be a separate event for clicking because I see a huge difference between dragend and click.
To differentiate between clicking and end of a dragging event in an SVG element, what would be the solution?
The documentation has some explicit examples for this:
When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:
selection.on("click", function() {
if (d3.event.defaultPrevented) return; // click suppressed
console.log("clicked!");
});
This, along with the stopPropagation() example immediately afterwards, allows you to control which events are fired and handled.
To be clear, differentiating between a drag end and click event is entirely down to you. The easiest way to do this is probably to set a flag when dragging takes place and use that flag to determine whether a dragend or click event should be handled.
Since 4.9.0 there is .clickDistance() with which you can control after which distance moved (from where you started dragging) you won't get a click event.
Note that you might get any click event at all if you remove the element from the DOM before release of the button (e.g. by using .raise() in the drag handler).
On my page, I have some events defined using Spine's controller events. They are assigned to selectors using jQuery's delegate, and they work fine:
events:
'click #zoom a': 'zoom'
'mouseenter #zoom a': -> $("#yZoom_help").show()
'mouseleave #zoom a': -> $("#yZoom_help").delay(1600).fadeOut 1600
Asynchronously at some point later in time, I set up some things with d3. Specifically, I am setting up zoom behavior on a canvas, a bunch of axes, etc.
#x_scale = d3.scale.linear()
.domain([#lcData.start, #lcData.end])
.range([0, #width])
#y_scale = d3.scale.linear()
.domain([#lcData.ymin, #lcData.ymax])
.range([#h_graph, 0])
#zoom_graph = d3.behavior.zoom()
.x(#x_scale)
.scaleExtent([1, #max_zoom])
.on("zoom", #graph_zoom)
#canvas = d3.select("#graph_canvas")
.attr("width", #width)
.attr("height", #h_graph)
.call(#zoom_graph)
.node().getContext("2d")
# ... some other things left out
The problem is that after I go through this d3 setup stuff, the mouse events on the non-d3 elements stop working. They just don't work at all. The elements have the highest z-index and are not obscured by any canvas or svg elements, but they stop detecting any mouse events.
d3 should only be activating mouse events on the canvas, right? Is there some d3 magic going on that is taking over the mouse on the entire page? For example, d3 inserts this div in the body:
EDIT: If you want to see what I mean, go to this link:
http://korhal.andrewmao.net:9294/#/sources/APH10154043
There is a little icon in the top left that changes color when you hover. This is the one with the mouse events; it is supposed to display a message. Once the page loads, it stops working. If you want to see it work, just reload the page and disable the JSONP call in your debugger, which prevents the function that sets up d3 from executing.
What happened here actually had nothing to do with d3. It seems that I was inadvertently calling #render twice during the loading of my Spine app, making all the elements get unbound from their events, when a view was appended.
Rebinding could be done with a call to #delegateEvents(#events) followed by #refreshElements, but in this case it was simply better to fix the superfluous #render call.
Related question with backbone: Why Backbone events on replacing html does not work?
I am new to jQuery and i want to figure out how to select multiple elements for my navigation bar i'm trying to create. I want to have it check if the users mouse is over the item in the navigation bar or over the drop down menu (otherwise the drop down menu would disappear). I have tried to use:
$('#nav_item_1').mouseenter(function(){
//make the drop down menu visible and change nav_item background here
}); `
$('#nav_item_1,#dropdown').mouseleave({
//revert everything back to normal
});
but then when i try to move my mouse from the item in the navigation bar to the drop down menu it reverts everything back to normal.
The issue that you're having is because when you leave the navigation bar item .mouseleave is being triggered instantly hiding the #dropdown with it.
What I would do here is set a slight time out on the mouseleave event of the nav_item about half a second or less to hide the dropdown. This will allow the user the amount of seconds set outside of the navigation bar so that they can hover over the dropdown. After the user is on the #dropdown I would clear the timeout preventing the normal behavior of the dropdown hiding.
How would you do this with code?
$('#nav_item_1').mouseleave(function() {
/* set your time out here to return everything to normal. Because we want to allow the dropdown to stay visible for a fraction of time required to move the cursor to the dropdown.*/
});
And then,
$('#dropdown').mouseenter(function() {
// clear the timer to prevent normal behavior (keeping the dropdown visible).
});
Check out this link: http://www.w3schools.com/js/js_timing.asp
Regarding your original question about selecting multiple items. You are doing it corrently. But as I explained above your code is not reaching the mouseleave event of the #dropdown.
The second piece of code makes it so that when you leave #nav_item_1 OR #dropdown, everything will be reverted. So when you leave the #nav_item_1 to go to the #dropdown, the event will fire.
You could check every mouse move if the current mouse target contains the dropdown or nav_item:
$("#nav_item_1").mouseenter(function () {
// make menu visible etc
}
$(document).mousemove(function (e) { // note the e parameter
if ($(e.target).has("#dropdown,#nav_item_1").length !== 0) {
// revert
}
}
This requires the two elements to be very close to each other in order for it to work properly though.
Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?
I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html
The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.
panel.on('click', function(e) {
e.stopEvent();
// do your stuff
});
another fix you could try (I haven't) is to wipe bubbleEvents on the button.
Another, possibly less robust fix is to turn on event buffering:
el.on('click', this.onClick, this, {buffer: 10});
Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.
{
...
preventDefault: true,
...
}