проблемы с «прыжками» с использованием привязанных тегов

Question

Кажется, что есть несколько тем для тегов привязки, но я не могу что-то сказать о том, как использовать Javascript для использования якорного тега без прыжка. Итак, моя страница загружена, и у меня есть div, который содержит 2 диаграммы (1 скрыт) и имеет 2 вкладки сбоку. Я бы хотел использовать эти вкладки для обмена диаграммами без перехода страницы к тегу привязки. У меня есть код ниже, но не уверен, что мне нужно переключиться, чтобы он работал.

HTML:

<div style="width:550px; height:200px; padding:0px; border:0px; margin:0px;"> 
    <div id="chartContainer" style="width:500px; height:200px; overflow:hidden; position:relative; float:left;">Chart...</div> 
    <div style="width:25px; height:200px; float:left; position:relative; padding-top:11px;"> 
    <div id="tabs1_div" style=" position:relative; float:left; padding-bottom:10px;"><a href="#" onClick="chartRender('Tab1');" ><img src="images/labortab.png" /></a></div> 
    <div id="tabs2_div" style=" position:relative; float:left;"><a href="#" onClick="chartRender('Tab2');" ><img src="images/odctab.png" /></a></div> 
    </div>  
    </div> 

Javascript:

<script type="text/javascript"><!-- 
FusionCharts.setCurrentRenderer('javascript'); 
var myChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "100%", "100%", "0"); 
myChart.setXMLUrl("Data/Data.xml"); 
myChart.render("chartContainer"); 

var myChart1 = new FusionCharts("Charts/Column3D.swf", "myChartId1", "100%", "100%", "0"); 
myChart1.setXMLUrl("Data/Data.xml"); 
//myChart1.render("chartContainer"); 

function chartRender(arg) { 
    if (arg == "Tab1") { 
     myChart.render("chartContainer"); 
    } 
    else if (arg == "Tab2") { 
     myChart1.render("chartContainer"); 
    } 

} 
// --> 
</script> 

Answer 1

Добавить return:false в вашу функцию chartRender.

function chartRender(arg) { 
    if (arg == "Tab1") { 
     myChart.render("chartContainer"); 
    } 
    else if (arg == "Tab2") { 
     myChart1.render("chartContainer"); 
    } 
    return false; 
} 

Ваши ссылки после HREF атрибута (#), который по умолчанию в верхней части страницы. Возвращая false, вы отменяете это поведение. Не забудьте также изменить вызов функции как onClick="return chartRender('Tab2');"

jsFiddle example

Answer 2

В функции вы звоните на <a> мыши, добавьте return false; в конце концов, это предотвратит ее от прыжков.

Answer 3

Вместо того чтобы использовать onClick в вашем йот, я хотел бы сделать это в JavaScript:

$(document).ready(function() { 
    $(".chartRenderer").click(function(e) { 
     e.preventDefault(); //this will prevent the "jump" 
     var arg = $(this).closest("div").attr("id"); 
     if (arg == "tabs1_div") { 
      myChart.render("chartContainer"); 
     } 
     else if (arg == "tabs2_div") { 
      myChart1.render("chartContainer"); 
     } 
    }); 
}); 

Это потребует от вас добавить class от chartRenderer на ваших якорях.

Answer 4

Использование return false; - хотя это может предотвратить прыжки, это немного перебор. Очень важно, чтобы вы поняли, что происходит, когда вы нажимаете что-то - 2 вещи:

1. «щелчок» событие вызывается на элемент, который вы щелкнули. Это событие события пузырится по дереву DOM (HTML) до тех пор, пока оно не достигнет корневого элемента (тег HTML или окно).

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

События Bubbling описан в # 1 имеет важное значение, так как вы можете иметь какое-то систему аналитики, которая ставит кетчуп все слушатель событий в теге BODY. На странице также могут быть другие плагины, которые выполняют любое другое действие всякий раз, когда нажимается гиперссылка. Дело в том, что вы никогда не знаете, что еще может или не понадобится в этом событии клика в будущем - так что это не помешает, чтобы событие «щелчка» запустило DOM. Используя return false;, вы предотвращаете что-либо еще, зная, что произошло событие щелчка.

Главное, что вы хотите сделать, это предотвратить поведение гиперссылки по умолчанию.Чтобы сделать это, вы можете вызвать preventDefault() в обработчик события:

var hyperlink = document.getElementById("my-hyperlink"); 
hyperlink.onclick = function(ev) { 
    ev.preventDefault(); // Prevent the default behavior of the browser 
} 

Вы также могли бы сделать следующее, что по сути то же самое, как return false;, но больше дескриптов и «правильным» с точки зрения программирования с JavaScript :

var hyperlink = document.getElementById("my-hyperlink"); 
hyperlink.onclick = function(ev) { 
    ev.stopPropagation(); // Stop the event bubbling 
    ev.preventDefault(); // Prevent the default behavior of the browser 
}