Html mouseup caching an element more than once - javascript

I've written a jquery script which works fine, but now I'm trying to make it into a plugin. Once it's in the plugin though, the mouseup function on the html appears to increase the cache of the same element by one every time, and I can't figure out why.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<div class="box">Box 1</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
(function($) {
$.fn.myPlugin = function() {
return this.each(function(){
var $this = $(this);
$('html').mouseup(function(){
console.log('cached +1: ' + $this);//this ouput increases by one every mouseup
});//html mouseup
console.log('cached once: ' + $this);// this output displays once per mouseup
});// return this each
} //fn myPlugin
})(jQuery);
$('.box').mousedown(function(){
$(this).myPlugin();
});//.box mousedown
});//document ready
//]]>
</script>
</body>
</html>
If someone could explain why this is happening (in as much layman's terms as possible), I'd be very grateful.
Thanks

You should tell us what you actuallywant to achieve but for a start:
Every time you click the element, $(this).myPlugin() gets executed.
This function itself binds an event handler to the mouseup event, so every time you click the element, a new mouseup event handler is added (but they are all doing the same thing).
So
click: $(this).myPlugin(); gets called -> 1 mouseup event handler.
click: $(this).myPlugin(); gets called -> 2 mouseup event handlers.
click: $(this).myPlugin(); gets called -> 3 mouseup event handlers.
etc.

Related

Trying to handle window.onpopstate function

I'm trying to hadle how to work with window.onpopstate. I thought that it must hadle browsers back and forward buttons but it also handles any links... So why does it happen?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
window.onpopstate = function( e ) {
console.log("!!!!!!!!!!!!!!");
}
</script>
</head>
<body>
first second
</body>
</html>
It happens because that is what is supposed to happen.
The popstate event is fired when the active history entry changes.
— MDN
Fired at the Window when the user navigates the session history
— HTML 5

Strange behavior Shift-Key Safari - HTML/Javascript

As requested, I simplified the problem as much as possible.
What I am trying to do is adding a onmousemove event to an HTML element, in this case the box, that will call a function. The problem I have is that not only mouse movements trigger the event, but also keys like SHIFT, CTRL, ALT... do.
So, once the mouse is passed over the box for the first time and the alert window is closed, any of the keys I mentioned previously will also make a new alert window pop up.
I am working with Safari, I also tested this on Google Chrome and the result is also a weird behavior of the browser.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml\" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
window.onload = function() {
boxx = document.getElementById("box");
boxx.onmousemove = showMessage;
}
function showMessage() {
alert("hello");
}
</script>
</head>
<body>
<div id="box" style="width: 900px; height: 300px; border: 1px solid;"></div>
</body>
</html>
I really don't understand what is happening, hopefully someone can help me!

Why does this "simple" `load` function not "work"?

sample:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').load(function(){
alert(1);
});
});
</script>
<TITLE> test load </TITLE>
</head>
<body>
<div id="test">
TEST
</div>
</BODY>
$(window).load(function () { ... });
Load events only fire on elements that have a URL associated with them, like images. You can however bind to the window load event which fires when all the elements on a page have loaded.
Alternatively you can bind to the document.ready event handler that fires when the DOM is ready to be manipulated. In jQuery we do this like so:
$(function () {
//run code here
});
Update
If you add elements to the DOM, do work on them before doing so:
$('#button').on('click', function () {
$('body').append($('<div />').addClass('some-class').text('Some Text').on('click', function () { alert('Ouch! You poked me.'); }));
});
Notice I ran some jQuery functions on an element I created using jQuery before appending it to the DOM.
.load is used as an ajax function in essence. you are trying to use it like a DOM load event.

Fire link onclick events and follow href from Javascript

I have a page defining a link ('a' tag) and some onclick events associated with it.
I am trying to add an arbitrary HTML element (in this case a div) with the ability to respond to click events by firing the click events of the link.
The code below describes all that.
The end goal is to trigger exactly the same actions whether the click was on the link or on the div without modifying the link or its onclick events.
My problem is that browsers don't respond in a consistent way when the div is clicked:
Google Chrome fires all 3 events and then follows the link href,
Firefox and IE fire the 3 events but do not follow the link href. In that case I can just add window.location = link.href to the div onclick handler.
Is it possible to make all browsers work the same way, whether it is the 1st or 2nd case ?
If it is not possible, do you have any suggestion that doesn't require modifying the link onclick events (event.stop()) or testing for the browser engine (if (not chrome) { window.location = link.href })?
Edit: Safari works the same way as Chrome, so I suppose this is a webkit issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>test</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.6.1.0");</script>
</head>
<body>
<div>
<a id="google_link" href="http://google.com" target="_blank">click to go to google</a>
</div>
<div id="google_link_proxy">click here to do the same as the link above</div>
<script type="text/javascript">
function fireEvent(element,event) {
if (document.createEvent) {
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
} else {
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
}
$("google_link").observe("click", function(){alert("action 1");});
$("google_link").observe("click", function(){alert("action 2");});
$("google_link").observe("click", function(){alert("action 3");});
$("google_link_proxy").observe("click", function(event){
fireEvent($("google_link"), "click");
});
</script>
</body>
</html>

How to prevent onclick statements from being executed?

I want to use an event listener for preventing the onclick statement of a submit button, however, using event.preventDefault() doesn't work as intended.
The code is like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
function addListener() {
document.getElementById("submit").addEventListener("click",
function(ev) {
alert("listener");
ev.preventDefault();
},
false);
}
</script>
<title></title>
</head>
<body onload="addListener();">
<form id="form" method="post" target="">
<input type="submit" id="submit" onclick="alert('onclick')" value="test" />
</form>
</body>
</html>
The expected behaviour is only "listener" will be alerted, but in practice (Firefox 3.7a5pre), "onclick" and "listener" are both alerted, in the given order.
It seems that onclick is being executed before the listener, so event.preventDefault() doesn't work. Is there a way to prevent onclick from being executed?
DOM0 handlers (onclick attributes and the like) and DOM2 handlers (dynamically added via attachEvent/addEventListener) are independent of one another.
The only thing you can do is remove the DOM0 handler (by assigning an empty string to the attribute) and go with just DOM2 handlers.
You can retrieve the DOM0 handler from the attribute before removing it, and re-register it as a DOM2 handler instead. You get into some browser inconsistencies (some will give you a Function object, others will give you a string), but those are readily handled in the code.
You can try this:
function addListener() {
document.getElementById("submit").addEventListener("click",
function(ev) {
alert("listener");
ev=ev¦¦event;
ev.preventDefault? ev.preventDefault() : ev.returnValue = false;
},
false);
}

Categories

Resources