JavaScript event listeners - javascript

My friend made it so that on their page you can't right click on the pictures to save them. After inspecting the html it looks like this is done with JavaScript to bind the mousedown event. If I disable JavaScript, then I can right click and save the pictures, but I want to try to see if I can do it without disabling JavaScript. I tried using the JavaScript console to set different values and functions to null, but it didn't work.
I set a breakpoint on the mousedown event and whenever I right click on a picture this is what happens.
return document.addEventListener("mousedown", (function(e) {
return _this.onMouseDown(e);
}), true);
Why is it necessary to bind the mousedown event every time a user clicks the button? Shouldn't it only have to be bound once at the beginning?
I tried using removeEventListener but it didn't do anything. How can I re-enable right click on the pictures?
This is the page.

Just run a browser that has a preference that prevents the web page from blocking right-click and set that preference (such as Firefox or Chrome). I can right-click save any of your friend's images in my default configuration of Firefox.
FYI, there are much more effective ways of doing right-click blocking than your friend is using (including ways that work even when Javascript is disabled), but no scheme can block anyone from taking the images. The images can always be copied via screen capture, grabbing from the browser cache, grabbing the image URL from the page source, etc...
A popular photo service uses a right-click deterrent by putting a scaled transparent gif image over a background image that is the actual image you see. When the user right-clicks they get the transparent gif, not the background image they're looking at. I call it a small deterrent because it's still easily bypassed by any determined thief. This scheme works even when javascript is disabled and even works in browsers like Firefox that prevent apps from blocking right-click because it doesn't use any javascript and because it feeds right-click the blank gif, not the image of interest.

You can see whether there are any other events attached to the document. UseVisual event
Also addEventListener is old way of attaching events, if you could use jquery then you can easily bind/unbind events using bind() and unbind() methods.

Related

How to tell what js function is creating an element with Firefox DevTools

I have a page with so many elements I dont need but I cant remove them because I dont see them in the html templates so I assume javascript is creating them at some point.
I would like to use Firefox developer tools to detect which functions are doing that in order to stop the page from creating those elements. What should I do? I use Firefox 53.0.3
Thank you.
First of all, you should verify whether the HTML is really added via JavaScript or it's already part of the page source.
To do that, right-click the page and choose View Page Source from the context menu or press Ctrl+U. In the source view search for the element, e.g. via its ID or its contents.
If you find it, it is obviously added within the server-side script, so you need to check there where it's added. If you cannot find it, it's added via JavaScript.
If the element is added by a specific action you do on the page, you can use Firebug's feature called Break on Child Addition or Removal, which allows to stop the JavaScript execution at the line where the change happened. To do so, right-click the parent of the element and choose the above option from the context menu.
A second way to find out where the HTML is added is by setting an event breakpoint for the load event. To do that, switch to the Events side panel, right-click the load event handler and choose Set breakpoint from the context menu:
Then reload the page. The script execution will stop at the related line. Starting from there, you need to step through the code until you reach the line where the element is added.
Having said that, Firebug is officially discontinued in favor of the Firefox Developer Tools and Firebug's Script panel doesn't work anymore in current versions of Firefox. (Also the option to set the breakpoint is missing.) Unfortunately, the Firefox DevTools are currently (as of Firefox 54.0) still missing the feature to break on DOM changes. There is already a bug report for it, though.
Having said that, the second option to stop at the page load is also available there. To do so, switch to the Debugger panel. In there click the button to expand the side panels (), then switch to the Events side panel. There you need to check the load event listener:
Then follow the steps as described above, stepping through the code until you reach the line where the element is added.

Trigger Keyboard Event Combination Shift+Q

I am very confuse and not sure either javascript or jquery can trigger keyboard event like Shift+Q or Alt+Q from button click. I already looking on this forum and also download some of js file like key-event.js and crossBrowser_initKeyboardEvent.js but I still cannot get a result what I want.
My situation is I need to trigger ALT+q key from button html. This should be automatically proceed and will be effect not only inside html(browser) but also on desktop client.
Thanks you.
The effects of keyboard and mouse events fired by Javascript within a web pages are limited to the contents of those web pages. These events cannot reach outside of the web page to trigger keyboard shortcuts in the browser or desktop.

how to debug javascript element (like a button)

It sound like a simple debug question but I cannot find the solution.
On a web browser like chrome, in the dev panel, I would like to inspect an element (like a button) and then ask chrome to find the corresponding javascript events on the page / file (in order to place breakpoint or to look at the code).
How can I do that ? (without fireing the event and checking the timeline as proposed by #dev3078 in this post How do I monitor what Javascript is being triggered when I click an element in a webpage?). I'd like to have, as in IDE, a 'goto javascript events declaration' !
go to sources, on the right side you'll see a dropdown called Event Listener Breakpoints, expand Mouse Events and select click, when you click on your Dom button, dev tools will go into debugging mode inside the first function called after the click event, you can also choose more events other than click

Trying to hide and show Flash video player with ExternalInterface

I'm trying to create an overlay containing a flash player that is shown when a user clicks on a link. The div containing the player starts with display:none in CSS. Upon clicking, the div will be shown, and JS will use ExternalInterface to configure and start the player. The JS configures the player when it catches a "flash ready" event, which is fired by Flash on ADDED_TO_STAGE.
All this works, except that the ExternalInterface callbacks are never created. The JS and AS3 work fine if the player is shown upon page load, or is hidden with visibility:hidden instead of display:none. I am aware that Flash will not be initialized with display:none, and this works as expected: when the Flash is unhidden, it fires its events and correctly initializes everything else (eg. GUI, other internal stuff). The only thing that doesn't happen as expected is that my ExternalInterface callbacks are not added.
ExternalInterface.available is true. It's not a timing problem, because even after several minutes the callbacks are still not present. The strangest bit is that the flash is able to call JS, fires JS events fine, and the code to fire the events comes after the code to add the callbacks. There are no errors thrown by any of the AS3 code. I'm seeing this problem in both Chrome and Firefox.
FWIW, I'm coding the embed HTML directly instead of using SWFObject, due to some unusual requirements.
Has anyone run into this sort of problem with display:none and ExternalInterface?
Thanks!
I have had issues with addCallBack before. What I ended up doing was having my Flash call an init() function in JS after it's loaded, then within that init, setting up and transferring variables.
Hopefully that helps!
This turned out to be a problem with some details I glossed over, thinking they were unimportant (sorry!). The showing/hiding of the Flash video was being handled by FancyBox, which actually copies your hidden HTML into a new div and shows that div. This worked as such, and the newly minted player was able to initialize and fire events. However, it used ExternalInterface.objectID to reference itself, and due to FancyBox there were now two elements with the same ID in the DOM. Therefore, the events that were triggered like $(#objectId).trigger(...) had .target set to the original Flash player, which was still hidden, and therefore had not initialized, and did not have the callbacks I was looking for.
I solved this by putting the HTML for fancybox in an HTML script tag:
<script type="text/html" id="fancyBoxTargetId">[Flash player html]</script>
this prevented there from being two elements with the same ID in the DOM (good to do anyway), and allowed Flash to self-reference using ExternalInterface.objectID.

Register click via javascript on flash without wmode in iframe(cross-domain)

I'm currently coding counter system and have spotted one problem with flash banners without wmode attribute at all, loaded via iframe from another website.
Works only mouseout event.
The problem is, that i can't catch click event on those banners.
Is there any solution?
Thanks.
No, Flash and other plugins deal with mouse interaction on their own and cannot be interfered with from HTML. Even if you changed the wmode and layered other HTML elements on top of the Flash, having caught a click on an element you could not then route that click into Flash either.
So you can't catch a click on Flash unless the Flash is deliberately written co-operatively to pass information about clicks out to JavaScript (eg. by providing a listener interface). There is no way to reliably audit third-party Flash banner clicks.
About all you can do would be to listen for mouseover/mouseout on a block containing the Flash, and if the current window loses focus in between the mouse entering and leaving, make a guess that the user clicked the banner and popped up a new window. This is still massively unreliable (plenty of scope of false +ves and false -ves).
no wmode or wmode=window means that the Flash file is rendered on top of the page not inside it. So you practically have no means to do anything with this file without the correct wmode (opaque or transparent)

Categories

Resources