Disable Links or Prevent Browser Redirect

Question

I been building a starter template/demo for web design applications, and I ran into a problem today.

When I select an anchor I don't want it's href to redirect the browser.

I know I can use javascript:void(0) or a # 'hash' for this, however I don't want to change it's hash I just don't want it to be a problem when designing.

So I applied return false; to it via .on(click mousedown touchstart mouseup touchend). I noticed that when I did that my drag method for my selected element was also set at return false so it kept dragging even when my mouse was up. (not suppose to happen)

While that solved the redirect problem that also made a bigger problem. So I removed mouseup touchend from that function. Made a new one to set the following to true.

$('#canvas').children().filter("a").on('click mousedown touchstart', function() {
  return false;
}).on('mouseup touchend', function() {
  return true;
});

So I decided to go a different route. When the select-tool or edit-tool is active I set all anchor's that have a target="_blank" property to target="_self".

Now the only way I know how to prevent redirection is using unbeforeunload which always prompts with a dialog.

// Ask if they want to leave. 
var hook = true;
window.onbeforeunload = function() {
  if (hook) {
    return "All your stuff may not be saved. Are you sure you want to leave?"
  }
}
function unhook() {
  hook=false;
}

I don't know of any way to bypass the dialog and stay on the page.

According to @duskwuff you aren't allowed to make a user stay when browser is asked for redirect using onbeforeunload.

Michael Schwartz · Accepted Answer · 2014-08-24T21:56:29.627

Fiddle - http://codepen.io/mikethedj4/pen/gCsih

The only solution I could come up with is refreshing the canvas.

$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());

I took the html of #canvas and set it as a value of a textarea. I then applied that textarea value as the canvas's html.

$('#canvas').children().drag("start",function( ev, dd ){
  dd.attrc = $( ev.target ).prop("className");
  dd.attrd = $( ev.target ).prop("id");
  dd.width = $( this ).width();
  dd.height = $( this ).height();
}).drag(function( ev, dd ){
  var props = {};
  if ( dd.attrc.indexOf("E") > -1 ){
    props.width = Math.max( 32, dd.width + dd.deltaX );
  }
  if ( dd.attrc.indexOf("S") > -1 ){
    props.height = Math.max( 32, dd.height + dd.deltaY );
  }
  if ( dd.attrc.indexOf("W") > -1 ){
    props.width = Math.max( 32, dd.width - dd.deltaX );
    props.left = dd.originalX + dd.width - props.width;
  }
  if ( dd.attrc.indexOf("N") > -1 ){
    props.height = Math.max( 32, dd.height - dd.deltaY );
    props.top = dd.originalY + dd.height - props.height;
  }
  if ( dd.attrd.indexOf("stylethis") > -1 ){
    props.top = dd.offsetY;
    props.left = dd.offsetX;
  }
  $('#stylethis').css( props );
}, {relative:true})
.on('dblclick', function() {
  EditableStylez();
  return false;
})
.filter("a").on('click mousedown touchstart', function() {
  return false;
}).on('mouseup touchend', function() {
  $("#code").val($("#canvas").html());
  $("#canvas").html($("#code").val());
  HandleSelectedElement();
  return false;
});

I really hate having to do this because the more elements that are in there and the more refreshing is done, the more ram it uses which makes the browser work the cpu that much harder.

I hope someone can come across a better solution.

Disable Links or Prevent Browser Redirect

1 Answers1