使用自定义 html 属性标签时出错

Question

我正在尝试使我的项目中的每个 HTML 元素都可点击。当它被点击时，它应该带我到另一个网页（other.html） 我的 JS：

let objs = document.querySelectorAll( 'body *' );
console.log(objs)
Array.from(objs).map(x => {
if (x.hasAttribute('loc') && x.hasAttribute('trig')){
let loc = x.getAttribute('loc')
let trig = x.getAttribute('trig')
let functionAtLast = function() {location.href = loc}
x.addEventListener(trig, functionAtLast)

}
})

我的 HTML：

<b loc = 'other.html' act = 'click'>hi</b>

当我点击粗体文本时，什么也没有发生。

我在这里做错了什么？

Answer 1

map 不应用于变异 数组元素 - 也不打算 用于迭代数组。为此，您应该使用for( of )（也不要使用.forEach 方法）。

• 您应该使用 HTML5 的 data-* 属性来存储自定义数据，而不是定义您自己的标准外观属性。
  • 我假设trig 是“触发器”的缩写，它是运行时定义的事件名称。
    • 我已将其更改为 data-event-name。
    • 您可以通过HTMLElement.dataset['eventName'] 获取值。
      • dataset automatically converts - in HTML attribute names to camelCase，所以您不需要需要执行 `getAttribute("data-event-name")。
  • 我假设loc 是“位置”的缩写，基本上是href URI。我已将其更改为 data-href。

像这样：

function setupClickableEverything() {
    const allBodyElementsWithAttribs = document.querySelectorAll( 'body *[data-event-name][data-href]' );
    for( const el of allBodyElementsWithAttribs ) {
        const eventName = el.dataset['eventName'];
        el.addEventListener( eventName, setWindowLocationToDataSetHref );
    }
}

window.addEventListener( 'DOMContentLoaded', setupClickableEverything );

function setWindowLocationToDataSetHref( e ) {
    
    const el   = e.currentTarget;
    const href = el.dataset['href'];
    window.location = href;
}

示例 HTML：

<b data-href="https://stackoverflow.com/questions/51390971/im-lost-what-happened-to-asp-net-mvc-5/51391202#51391202" data-event-name="click">Navigate on click</b>
<br />
<b data-href="https://stackoverflow.com/questions/15305278/how-to-check-if-a-string-contains-a-specific-text/15305313#15305313" data-event-name="mousedown">Navigate on mousedown</b>
<br />
<b data-href="https://stackoverflow.com/questions/70011022/is-there-a-difference-between-and-is-not-in-c/70011062#70011062" data-event-name="contextmenu">Navigate on right-click</b>

---

这是一个使用 StackOverflow sn-p 稍作修改的演示。 _{由于 SO 对 Snippets 施加的 CSP，下面的演示无法导航、打开弹出窗口或将内容加载到 <iframe>，但它仍然展示了它的工作原理原则：}

function setupClickableEverything() {

    const allBodyElementsWithAttribs = document.querySelectorAll( 'body *[data-event-name][data-href]' );

    for( const el of allBodyElementsWithAttribs ) {
        
        const eventName = el.dataset['eventName'];
    //  const href      = el.dataset['href'];
        el.addEventListener( eventName, setWindowLocationToDataSetHref );
    }
}

window.addEventListener( 'DOMContentLoaded', setupClickableEverything );

function setWindowLocationToDataSetHref( e ) {
    
    const el   = e.currentTarget;
    const href = el.dataset['href'];
    //window.location = href;
    // To avoid breaking this demo, links are opened in the <iframe>.
    // StackOverflow snippets cannot use `window.open`.
    
//  document.getElementById('demoIFrame').src = href;
    document.getElementById('demoOutput').textContent = href;
}

<b data-href="https://stackoverflow.com/questions/51390971/im-lost-what-happened-to-asp-net-mvc-5/51391202#51391202" data-event-name="click">Navigate on click</b>

<br />

<b data-href="https://stackoverflow.com/questions/15305278/how-to-check-if-a-string-contains-a-specific-text/15305313#15305313" data-event-name="mousedown">Navigate on mousedown</b>

<br />

<b data-href="https://stackoverflow.com/questions/70011022/is-there-a-difference-between-and-is-not-in-c/70011062#70011062" data-event-name="contextmenu">Navigate on right-click</b>

<hr />

<!-- To avoid breaking this demo, links are NOT actually opened, just shown in the <output> element below. I tried to make it work using an <iframe> but the CSP on SO prevents that. Note that SO snippets are blocked from using `window.open` too.  -->
<!--<iframe id="demoIFrame" width="500" height="500" border="1"></iframe>-->
<output id="demoOutput"></output>