为什么e.relatedTarget给出与e.target相同的结果？

Question

我正在测试一些Bootstrap选项卡，以便了解relatedTarget和target。在我选择的选项卡中单击时，值更改，但是对于两个变量，结果是相同的：激活选项卡的名称。

<p class="active-tab1"><strong>Active Tab1</strong>: <span></span></p>
<p class="active-tab1"><strong>Previous Tab1</strong>: <span></span></p>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="active-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-toggle="tab"> Tuto Point Home</a></li>
    <li><a href="#ios" data-toggle="tab"> iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a id="atruc" href="#jmeter" tabindex="-1" data-toggle="tab"> jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab"> ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>bla bla bla home</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>bla bla bla ios</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>bla bla bla jmeter</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>bla bla bla ejb</p>
    </div>
</div>
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var activeTab = $(e.target).text();
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            var activeTab = $(e.target).text();
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab1 span").html(activeTab);
            $(".previous-tab1 span").html(previousTab);
        });