Open link when mouse is clicked

Question

I am very new to Javascript so I don't know too much. I want the user to click this shape and for it to open a link. Here is my code:

stage.on('mousedown', function(OpenLink) {
    var shape = evt.targetNode;
    if (shape) {
        Application.OpenURL("[My link goes here]");
    }
  });

I don't know if this is even close to being right, but I can't seem to find an answer.

EDIT: This is code that I have added onto this: http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/

What is `stage`, what is `Application`, what is `OpenURL` what is `evt` etc? — adeneo, Jan 29 '14 at 21:27
Could be wrong but I believe the ***jQuery*** parameter to an event handler is the event object. (i.e. `OpenLink` is an event object and `evt` is undefined). You may want to review the [docs](http://api.jquery.com/on/)... — War10ck, Jan 29 '14 at 21:30
Yes, this Kinetic.js. stage is a Kinetic.Stage. The Application.OpenURL is what I thought was used to open a link. — user2397282, Jan 29 '14 at 21:33

score 0 · Answer 1 · answered Jan 29 '14 at 21:28

0

Use window.location = "[My link goes here]"; to navigate to another url.

answered Jan 29 '14 at 21:28

Randy

4,351
2
25
46

This is by far not a complete answer to the question. – Joeytje50 Jan 29 '14 at 21:28
1

@RickS They acting the same when you assign url to them. [Difference between window.location and location.href](http://stackoverflow.com/questions/9903659/difference-between-window-location-and-location-href) – Givi Jan 29 '14 at 21:30
@RickS Makes no difference. – War10ck Jan 29 '14 at 21:34

score 0 · Answer 2 · answered Jan 29 '14 at 21:33

I am assuming you have jQuery installed, considering you've included the jQuery tag in your question. If not, see http://jquery.com

You can do this via a jQuery click event handler:

$('.stage').mousedown(function(e) {
    var shape = e.target;
    window.location.href = 'http://example.com';
});

If this is not what you were looking for, please reply to this answer explaining what you do want it to do.

See demo.

PS: in this script you don't do anything with the element that triggered the click event, but you do store it in the shape variable. I included this purely to demonstrate how to get the element that triggered the event, but in this script, that line can be omitted.

relic · Accepted Answer · 2014-01-29T21:55:01.053

Think this should work. 'stage' assumes you're referencing the object tag. If 'stage' is a class or id, would need to update accordingly.

$('stage').mousedown(function(ev){    // Attach mousedown listener
  if (ev.target.targetNode) {   // if clicked object has 'targetNode'
    ev.preventDefault();   // prevent additional bubbling
    window.location.href = 'http://www.google.com';    // Send browser to url
  }
});

You could also store the url on the clicked objects as an attribute or data, and grab it when clicked.

<thing data-myUrl="www.website.com"></thing>

.. and:

window.location.href = $(ev.target).data('myUrl')

EDIT:

Using the functions from the link you provided, your function should be:

stage.on('mousedown', function(evt) {
  var shape = evt.targetNode;
  if (shape) {
    window.location.href = 'http://www.google.com';
  }
});

.. so this will send the browser to your url, anytime the user clicks on anything that has ANYTHING as its 'shape' value. You could use (shape === 'circle') or whatever if you wanted to be more specific about what they clicked on. ('circle' is a guess, your actual shape values may differ)

This doesn't seem to work. Check the edited link in my post; My code is basically the same as that. — user2397282, Jan 29 '14 at 21:46
"basically" the same, means "not" the same. My solution assumes you have jQuery library included (since you tagged issue with jQuery). When you say "This doesn't seem to work", are you looking at your console to see what errors you're getting? — relic, Jan 29 '14 at 21:51

Open link when mouse is clicked

3 Answers3