WedX - журнал о программировании и компьютерных науках

Отключить ссылки или запретить перенаправление браузера

Скрипт — https://liveweave.com/gWoHkb

Я создавал начальный шаблон/демонстрацию для приложений веб-дизайна и сегодня столкнулся с проблемой.

Когда я выбираю привязку, я не хочу, чтобы href перенаправлял браузер.

Я знаю, что могу использовать для этого «хеш» javascript:void(0) или #, однако я не хочу менять его хеш, я просто не хочу, чтобы это было проблемой при разработке.

Поэтому я применил к нему return false; через .on(click mousedown touchstart mouseup touchend). Я заметил, что когда я сделал это, мой метод перетаскивания для выбранного элемента также был установлен на return false, поэтому он продолжал перетаскивать, даже когда моя мышь была поднята. (не должно произойти)

В то время как это решило проблему перенаправления, это также создало большую проблему. Поэтому я удалил mouseup touchend из этой функции. Сделал новый, чтобы установить следующее значение true.

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

Поэтому я решил пойти другим путем. Когда активен инструмент выбора или инструмент редактирования, я устанавливаю для всех якорей, имеющих свойство target="_blank", значение target="_self".

Теперь единственный способ, которым я знаю, как предотвратить перенаправление, - это использовать unbeforeunload, который всегда предлагает диалоговое окно.

// 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;
}

Я не знаю, как обойти диалог и остаться на странице.

Согласно @duskwuff, вам не разрешено заставлять пользователя оставаться, когда в браузере запрашивается перенаправление с помощью onbeforeunload.

24.08.2014

Ответы:


1

Скрипт — https://codepen.io/mikethedj4/pen/gCsih

Единственное решение, которое я мог придумать, это обновить холст.

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

Я взял html #canvas и установил его как значение текстовой области. Затем я применил это значение textarea в качестве 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;
});

Я действительно ненавижу это делать, потому что чем больше элементов там находится и чем больше выполняется обновление, тем больше оперативной памяти он использует, что заставляет браузер работать с процессором намного тяжелее.

Я надеюсь, что кто-то может найти лучшее решение.

24.08.2014
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]