javascript - 尝试从目标事件获取数据时在 IE8 中出现问题

Question

我有这样的代码..

// Get some data
var id = event.target.id;
var flag_status = event.target.dataset.change;
var winner_id = event.target.dataset.winner;
var item_id = event.target.dataset.item;

Firefox 和 Chrome 等“普通”浏览器可以毫无问题地获取这些值，并且一切正常；但是 IE8 没有任何反应，所以我假设它无法获取数据。

event 参数通过以下代码传递给此函数:

$('.shipping_status').click(function(event) {

    event.preventDefault();
    
    // Update Shipping Status
    updateShippingStatus(event);
    
});

.. 然后在单击这些示例元素之一时依次获取它:

<a title="Item Being Processed" class="shipping_status processing" data-item="102383" data-winner="172" data-change="0" id="processing_102383" href="#"></a>                            
<a title="Item Posted" class="shipping_status posted active" data-item="102383" data-winner="172" data-change="1" id="posted_102383" href="#"></a>
<a title="Problem With Item" class="shipping_status problem" data-item="102383" data-winner="172" data-change="3" id="problem_102383" href="#"></a>
<a title="Item Delayed" class="shipping_status delayed last" data-item="102383" data-winner="172" data-change="2" id="delayed_102383" href="#"></a>

有什么方法可以让它在 IE8 上运行？ ...此外，我没有 IE9+ 来测试 - 有人知道它是否适用于 IE9+ 吗？

如果有另一种方法可以使用 jQuery 获取此数据，并且该方法也适用于 IE8，我还使用 jQuery 对其进行了标记。

Answer 1

看起来 IE 刚刚开始支持 IE11 中的 dataset 属性:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

尝试只使用 getAttribute():

var flag_status = event.target.getAttribute('data-change');
var winner_id = event.target.getAttribute('data-winner');
var item_id = event.target.getAttribute('data-item');

如果您使用的是 jQuery，则使用 data() 方法可以轻松完成此操作:

var $target = $(event.target);
var flag_status = $target.data('change');
var winner_id = $target.data('winner');
var item_id = $target.data('item');

只有在 HTML 元素的属性不会改变时才使用 data()。来自 jquery documentation :

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

如果需要重新读取发生变化的 HTML 属性，只需使用 attr() 方法:

var $target = $(event.target);
var flag_status = $target.attr('data-change');
var winner_id = $target.attr('data-winner');
var item_id = $target.attr('data-item');