Currently, I am developing an interactive web application that is accessible at (login: [email protected], password: demo). This application allows users to move items from the left column to the workspace on the right, where they can resize and edit them as needed.
While working on the text editing feature for the objects today, I encountered some unexpected behavior that I am struggling to identify the root cause of. Specifically, when you click on a text field to edit the text and then click outside the textbox, an alert message is triggered. However, if you click on the same text field and then outside of it again, the alert message repeats multiple times. This repetitive firing of the "blur" event handler is perplexing me. I am not very familiar with Firebug or Chrome's debugging tools, especially when it comes to more subtle functionalities that could help me troubleshoot this issue.
Furthermore, there is another perplexing issue related to clicking on an object's image. If the object contains both text and an image, clicking on the image does not trigger the alert at all. In other words, the "blur" event handler does not fire unless you interact with a part of the object other than the image. This behavior is quite baffling, and I am unsure of the reason behind it.
Below is the snippet of code (utilizing jquery) that includes the event handler for the "blur" event:
var jqSelector = "#mesh div.mesh-obj span";
$(document)
.on("mouseover mouseenter", jqSelector, function(event) {
// code for mouseover and mouseenter
})
// other event handlers
.on("click", jqSelector, function(event) {
// code for click event
// handling of blur event
});
I am seeking assistance in resolving these issues. Any help is greatly appreciated. Thank you!