HTML标签

【HTML标签】为什么在HTML中使用onclick()是一种糟糕的做法

2020-09-02 11:48发布

站内问答 / HTML/CSS
829 1 1
发送
1条回答
小猪仔
2楼 · 2020-09-03 10:02

如果使用jQuery，那么：

HTML：

 link

JS：

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });});

这有没有JS，或者如果用户中间点击链接的好处。

这也意味着我可以通过再次重写来处理通用弹出窗口：

HTML：

 link

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });});

这可以添加一个弹出窗口到任何链接，只要给它弹出的类。

这个想法可以进一步扩展如下：

HTML：

 link

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });});

我现在可以在整个网站上使用相同的代码来播放大量弹出窗口，而无需编写大量onclick内容！

这也意味着，如果稍后我决定弹出窗口是不好的练习，并且我想用灯箱样式窗口替换它们，我可以改变：

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

至

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

我整个网站上的所有弹出窗口现在都完全不同。我甚至可以做功能检测来决定在弹出窗口上做什么，或者存储用户偏好以允许或不允许。使用内联onclick，这需要大量的复制和粘贴工作。


相关问题推荐

没有解决我的问题，去提问