单击鼠标时打开链接

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/

Answer 1

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

Answer 2

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.

Answer 3

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)