JavaScript error "Function is expected" - javascript

I have several listeners like this, which listen to click and then displays content within <div id="c50"><a hre...>CONTENT</a></div> (in this case). Everything works in Opera, Chrome and FF, but not in IE.
google.maps.event.addListener(pano50, 'click', function() {
fireEvent(document.getElementById("c50").getElementsByTagName("a")[0], 'click');
})
Chrome javascript console tool displays this error after click (but works fine):
Uncaught TypeError: object is not a function
but traditionally, IE8 displays:
Function expected on line 817
which is the first line of code above and do nothing after click. Thank you for any advice!
EDIT: here is the fireEvent function:
function fireEvent(element, event) {
if (document.createEventObject){
/* for IE */
return element.fireEvent('on' + event, document.createEventObject());
}else{
/* for other browsers */
var evt = document.createEvent('HTMLEvents');
evt.initEvent(event, true, true);
}
return !element.dispatchEvent(evt);
}

You've got MooTools running on your page. MooTools overrides IE's built-in element.fireEvent() method with its own normalized method that works for all browsers. MooTools' version of fireEvent() expects "click" instead of "onclick".
You can fix this one issue by simply changing your fireEvent function to use "click" instead of "onclick":
/* for IE */
return element.fireEvent(event, document.createEventObject());
But, since MooTools normalizes element.fireEvent to work with all browsers, you may be able to ditch your fireEvent function, and instead just call element.fireEvent() directly.
You may have bigger problems. You are using MooTools and jQuery side by side which is ok, but if you don't know what you are doing, you can get into trouble quickly.

It's possible it's complaining because
document.getElementById("c50").getElementsByTagName("a")[0]
is not a function. Where is the fireEvent function coming from?

Related

Anything that stands out why this would break in firefox like this

Anything that stand out why this would break in firefox like this:
var test = ko.dataFor($(event.target).closest('blah')[0]);
The error message is:
ReferenceError: event is not defined.
Doesn't happen for IE or Chrome.
IE originally had a global event object, meaning it would be available without naming the argument
element.addEventListener('click', function() {
console.log(event); // would be the object in IE
});
All though this is not really standard behaviour, Chrome decided to implement this as well.
In Firefox however, event would be undefined in the above code, and the argument would have to named, as in
element.addEventListener('click', function(event) {
console.log(event); // works everywhere, ^ becase it's there
});
This is how it should be done, without relying on the global event object

Why is there an 'event' variable available without being defined when there was an event upstream?

I stumbled across an odd behaviour today. Basically, I had a function bound to a knockout.js click event. The function was making use of the knockout event, but was not explicitly taking it as an argument.
this.myClickHandler = function(){
console.log(event); //event gets logged in Chrome/IE11, not Firefox
}
This looked weird to me, but in Chrome it was working as expected. It also worked correctly in IE11. In Firefox however, it did not function. As soon as I explicitly it worked in all browsers. This is what I would expect would be needed for it to work at all.
this.myClickHandler = function(model, event){ //event is second parameter passed from knockout click event
console.log(event); //event gets logged in all browsers
}
I had a play around and reproduced this with jQuery as well
function func(){
alert(event);
}
function runFunc(callback){
callback();
}
$(document).ready(function(){
runFunc(func);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So how is this working? Why do I have access to a variable called 'event' in some browsers but not others? Is this intended behaviour?
It is something that got carried from the old version of IE, where the event object was not passed to the handler method instead it was set in the global context.
For backward compatibility IE still supports this model and chrome also has added support for this feature. But FF is not supporting it.
Event object references

Managing JavaScript hotkeys in Chrome Browser

I have the following jQuery code on a site I built:
$(document).ready(function() {
// Other Bindings/Initializations Removed
// Hotkey Event Handler to 'doSomething'
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
$(document).keypress("a",function(e) {
if(e.altKey) { // Doesn't work
doSomething();
}
});
// Hotkey Event Handler to 'doSomething'
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
$(document).keypress("a",function(e) {
if(e.shiftKey) { //Works as Expected?
doSomething();
}
});
});
The code catches key-press combination events, in this case "Alt-A", and then proceeds to call a function which preforms the appropriate action. I tested this feature in FireFox and the function was called as expected. When I tested the feature in Chrome the function was not called and an obnoxious error tone was emitted instead. I thought that perhaps "Alt-A" collided with an important browser hotkey combination so changed "A" to "N", "G", and then "K"; each time the function was not called and the error tone was emitted. However when I created a Shift-A/N/G/K hotkey combination, Chrome called the function as expected.
Why does Chrome handle the "Alt" key differently?
How to I define a hotkey for my site so that it will work in Chrome using the "Alt" key?
This works in Chrome and Firefox, however in IE Alt+a opens the favorites menu. I'm not sure how you would override that.
Fiddle
HTML:
<a accesskey="a">​
Javascript:
$(document).ready(function() {
// Other Bindings/Initializations Removed
// Hotkey Event Handler to 'doSomething'
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
$(document).keypress("a", function(e) {
if (e.shiftKey) { //Works as Expected?
alert("shift a");
}
if (e.altKey) {
alt_a_function();
}
});
$(document).on("click", "[accesskey=a]", function() {
alt_a_function();
});
});
function alt_a_function() {
alert("alt a");
}​
The jQuery docs say that the first argument to .keypress() is "A map of data that will be passed to the event handler." Perhaps jQuery is confused when that object is a string, which causes an error in Chrome.
To check for a particular key in the event handler, use e.which to get the character code instead.

element.dispatchEvent is not a function

I wrote a plugin , but whene Active ,disable Editor and in firebug Mozila below error Is shown
element.dispatchEvent is not a function prototype.js:5457
and line 5457 prototype.js
if (document.createEvent)
5457: element.dispatchEvent(event);
else
element.fireEvent(event.eventType, event);
return Event.extend(event);
}
but plugin work very good but disable Editor.
What is the cause؟
Its cause the variable element has no function dispatchEvent. So you should check that element in this case is the one you expect, I doubt it. Probably you pass null/undefined or any other object but not a DOM element to this function.

JavaScript event handlers -why no alert?

I'm a newbie at JavaScript trying to learn event handlers. Looking at this fiddle http://jsfiddle.net/mjmitche/uV4kv/ can anyone tell me why the pop up is not appearing when the link is clicked?
I've also copied the code below
click me
function addEventHandler(oNode, sEvt, fFunc, bCaptures){
if (typeof(window.event) != "undefined")
oNode.attachEvent("on"+sEvt, fFunc);
else
oNode.addEventListener(sEvt,fFunc,bCaptures);
}
function onLinkClicked(e) {
alert("you clicked the link");
}
function setUpClickHandler(){
addEventHanlder(document.getElementById('clickLink'), "click", onLinkClicked, false);
}
addEventHandler(window,"load",setUpClickHandler,false);
There are basically three problems:
You have some typos, e.g. "Hanlder" instead of "Handler" and "Sevt" instead of "sEvt".
The code is already run after page load, so the event handler you add to window will never be called. Change in jsFiddle from onLoad to no wrap (head).
You "IE detection" does not work. I get this error in Chrome:
Uncaught TypeError: Object http://fiddle.jshell.net/_display/# has no method 'attachEvent'.
Better would be to test whether the function window.attachEvent exists. I also think that window.event is only available when an event is raised.
If this is corrected, your code will run (DEMO).
Further notes:
Testing which method is supported (i.e. attachEvent or addEventListener) on every call of your function is unnecessary. It won't change during the life of the page. Better is to test only once at the beginning. Example:
var addEventHandler = (function() {
if(window.attachEvent) {
return function(oNode, sEvt, fFunc) {
oNode.attachEvent("on"+sEvt, fFunc);
};
}
else {
return function(oNode, sEvt, fFunc, bCaptures) {
oNode.addEventListener(sEvt,fFunc,bCaptures);
};
}
}());
This assigns a function the supported function to addEventHandler.
A couple of problems:
You have a recurring typo, "Hanlder" instead of "Handler". There are at least two, one where you do your setUpClickHanlder (sic) function, and one within it (addEventHanlder).
Also, you have "Sevt" where you mean "sEvt". (JavaScript is case sensitive.)
Let tools help you. Use a browser that gives you a console showing errors. Use a debugger for single-stepping through code, looking at variable values at runtime with inspectors, etc.
Your addEventHandler needs adustment:
function addEventHandler(oNode, sEvt, fFunc, bCaptures) {
oNode.attachEvent ? oNode.attachEvent ("on" + sEvt, fFunc) :
oNode.addEventListener (sEvt, fFunc, bCaptures);
}
It is in event handlers themselves that you need to check for window.event

Categories

Resources