小众软件文章,跳转论坛按钮bug,附解决办法

bug所在区域:
小众软件博客,每一篇软件文章下方的“点击前往加入讨论”按钮。
bug按钮
别看他板板正正,但也就是这么一个小东西,也能有bug。

问题:
有较高概率点击“点击前往加入讨论”没反应

:shaking_face:

异常现象:
正常视角:
1、它看起来是一个按钮,你看他又大又方。
2、鼠标移动到这个有背景色的长方形会触发背景色改变,鼠标会变成拇指形状(更加印证了这是一个可以点击的按钮)。
3、它不能被点击,点击了也没反应。(所以博主是让我们点还是不让我们点呢?产生困惑)
低概率 :shushing_face:
4、如果碰巧鼠标在文字上,可以点击进入论坛。
为什么说是低概率,因为鼠标在蓝色方块已经展现出可以点击的迹象了,所以不会专门移动到文字区域,
用户的认知是我已经在按钮的范围内了,不需要再移动到我不知道的特殊位置,
而每次鼠标移动到按钮上停下来的位置具有一定的随机性,所以虽然文字区域仅占有1/4区域,也有概率被点击到
(这里要排除掉一些特殊用户,他们超级细心,第一次就能发现这种细节,并且很快适应,但是这样的现象显然是存在问题的,请不要否认,大多数人真的没有精力去研究每一个细节)

点击没反应区域示意图
·

:face_in_clouds:

尝试:
经过反复困惑,反复阅读代码,
终于忍不住提出建议和解决办法。
(每次产生困惑我都会看一眼代码,然后继续困惑,直到今天忍不住仔细研读了一下代码,显然问题出在博主设置了链接的边距,并思考了如何最小的更改修正这个bug)
考虑到博主有不同的性格,提供多种解决办法,根据性格和依恋类型选择其一即可。

:robot:

思考:
甚至考虑到博主可能事务繁忙,没有太多精力修复,再次深入:
仔细研究,得出博主使用的是Wordpress程序,咱虽然没用过,但动手能力强啊,为了便于博主解决这个问题,连夜加班部署了一套PHP+MYSQL环境安装了Wordpress,学习Wordpress的模板结构,避免一切意外。

:rofl:

结论:
问题总比办法多,但办法也是存在的。

最终打死不改解决方案3套,任选其一即可:
前置步骤:进入Wordpress后台,进入左侧导航栏的“外观 > 主题文件编辑器”,准备编辑。
切记:一切修改都应该先备份原本的文件。

:sparkling_heart:

解决方法1 :slightly_smiling_face:
简单直接,适合万事随心,水利万物而不争,安全型依恋人格、疏离型依恋人格。

在模板(大概率是single.php)里找到↓


<div class="wpdc-join-discussion">

改为以下代码(新增onclick属性,事件为当点击按钮区域时,找到div内的第一个a元素[链接],点击它)


<div class="wpdc-join-discussion" onclick="this.querySelector('a').click();">

解决方法2: :cowboy_hat_face:
维持代码风格。适合有点完美主义,回避型依恋人格。

在模板(大概率是single.php)里找到↓

<div class="wpdc-join-discussion"><a class="wpdc-join-discussion-link" href="xxx" target="_blank" rel="noreferrer noopener">点击前往加入讨论</a></div>

在后面加入以下代码(加入一个script元素,找到通过div的class精确找到div,加入点击事件代码,当点击事件发生时,点击div里的第一个a元素[链接])

<script type="text/javascript">
document.querySelector('div[class=wpdc-join-discussion]').addEventListener('click', function() {
    this.querySelector('a').click();
});
</script>

解决方案3 :enraged_face:
步骤简单。适合快速解决又简单实在,焦虑型依恋人格。

找到模板的“页脚模板”(大概率是footer.php),直接加到页面最后,不用到处找代码。

加入以下代码。

<script type="text/javascript">
if(document.querySelector('div[class=wpdc-join-discussion]')){
    document.querySelector('div[class=wpdc-join-discussion]').addEventListener('click',function() {
        this.querySelector('a').click();
    });
}
</script>
2 个赞

我勒个去!这还能有bug!

改了改了。不过,要等下缓存(大概需要几天时间),新内容不会有问题了。

有bug? 不管, 能跑就行!

还真快!