javascript - 访问事件元素 JavaScript(有或没有 Angular )

Question

长话短说

我做了一个标签模块，只需要 css 就可以工作。
有两件事我想不通

1.防止页面在点击时跳转到链接，同时保持location发生的hash变化

绑定(bind)到点击事件并通过点击上的自定义“a”指令调用 preventDefault() 可防止将事件状态应用于链接或部分。

2。如何使用 javascript 确定元素何时处于事件状态。只是javascript。没有 jQuery 或 Angular (":active") 选择器...

jQUery 2.1.1 使用查询选择器 all 来对 document.activeElement 做一些事情，但我无法弄清楚......它做了什么。据我所知，没有这样的 :active 属性可以在任何地方使用 javascript 访问...

有人有什么想法吗？

plnkr

注意:当您查看 plnkr 时，如果您希望选项卡正常工作，您需要注释掉 script.js 第 50 行对 tabs 指令的函数调用

js

function tabItem(){
   return ['$location' , '$anchorScroll', function($location, $anchorScroll){
    return{
      restrict: "EA"
      , trandsclude: true
      , scope: {}
      , template: ""
      , link: function (scope, elem, attr) {
          elem.bind('click', function(e){
            e.preventDefault();
          });
      }
    }
  }]
}
tabs.directive('a',tabItem())

html

<div class="container" ng-app="tabs">
    <div class="tabs" ng-controller="ThingController as thing">

      <div id="tab1" class="tab">
        <h1 class="tab-header">
            <a href="#tab1" ng-click="thing.dance()" >{{thing.name}} </a>
          </h1>
        <div class="tab-section">
          This is some dummmy content la la la la
        </div>
      </div>

      <div id="tab2" class="tab">
        <h1 class="tab-header">
            <a href="#tab2"> {{thing.otherName}} </a>
          </h1>
        <div class="tab-section">
          derp
        </div>
      </div>

      <div id="tab3" class="tab">
        <h1 class="tab-header">
            <a href="#tab3"> {{thing.otherName}} </a>
          </h1>
        <div class="tab-section">
          This is some more dummmy content
        </div>
      </div>

    </div>
  </div>

CSS

 .container{
      display: block;
    }
    .tabs, .container {
      background: #ffffff;
      min-height: 1200px;
      position: relative;
    }
    .tabs, .container, .tab-section, .tab-header a{
        width: 100%;
    }
    .tab{
      display: inline;
    }
    .tab-header {
      background: #eee;
      border: 1px solid #000;
      display: flex;
      float: left;
      position: relative;
      width: 145px;
    }

    .tab-header a {
      color: #333;
      display: table-cell;
      font-size: 14px;
      padding: 1.2rem 0;
      text-align: center;
    }
    .tab-section {
      position: absolute;
      z-index: -2;
    }
    .tab:not(:active) .tab-section, .tab:target .tab-header {
      background: white;
    }
    .tab:target .tab-section {
      background: #eee;
      top: 60px;
      z-index: 1;
    }

Answer 1

var active = document.activeElement;

控制台日志(事件)；