javascript - 检测 href 点击

Question

好的，我这几天一直在尝试弄清楚如何检测用户点击，以及如何为变量分配新属性。我尝试了几种不同的方法，但大多数都没有用。

到目前为止，我已经有了这个，这是非常 self 解释的。

var settings = {
    objSlideTrigger: '#one', // link button id
    objSlidePanel: '#content-one' // slide div class or id       
};


if(document.getElementById('#one').click) {
 var setup = settings;
    setup.objSlideTrigger = '#one',
    setup.objSlidePanel = '#content-one'
};

if(document.getElementById('#two').click) {
 var setup = settings;
    setup.objSlideTrigger = '#two',
    setup.objSlidePanel = '#content-two'
};

当用户单击页面上的 href 时，我希望它被 javascript 检测到，并且为了将正确的设置放置在设置 var 中以供其余代码使用。 我真的有两个问题，第一个是，我必须将条件语句复制至少十次，所以无论如何要压缩/简化代码。

其次，当在 javascript 中检测到 Href 点击时，我是否必须为 html 中的实际元素分配一个 onclick 值？

再次感谢。

Answer 1

使用 jQuery

假设你想使用 jQuery 因为你已经将它包含在顶部，请使用:

$(document).on('click', '#one', function( event ) {
   //Do Code here
   //For #one click event
});

尽管如此，为了防止 DRY - 通过使用类使其更通用:

<div class="updatesettings" id="one">One</a>
<div class="updatesettings" id="two">Two</a>

<script>
    $(document).on('click', '.updatesettings', function( event ) {
       //Do Code here
       //For all .updatesettings click event
       alert( $(this).attr('id') );
    });
</script>

使用 JavaScript

var OnOneClick = function() { 
  // Your click handler
};

var OneClick = document.getElementsById("#one");
OneClick.addEventListener('click', OnOneClick, false);

然后监听multiple, use by Class(虽然不是所有的IE版本都能监听这个):

var AwaitedClickEvent = function() {
    //Class Click
}

var WaitingClick = document.getElementsByClassName('clickme');
for (var i = 0; i < WaitingClick.length; i++) {
   var current = WaitingClick[i];
   current.addEventListener('click', AwaitedClickEvent, false);
}

您的解决方案

<!-- Links with ID & Content -->
<div class="updatesettings" id="one" data-content="content-one">One</a>
<div class="updatesettings" id="two" data-content="content-two">Two</a>

<script>
    /**
     *   Get the clicked element's ID
     *   and it's stored data-content string.
    **/
    $('.updatesettings').on('click', function( event ) {
         var Id = $(this).attr('id'),
             Content = $(this).data('content'),
             setup = settings,
             setup.objSlideTrigger = Id,
             setup.objSlidePenl = Content;

         console.log( setup );
    });
</script>