使用a标签的href属性调用js函数中的坑

在 a 标签中调用js函数，通常有两种方法：

#借用href属性
<a href="javascript:jsFunction('param');">借助href属性</a>
#绑定click方法，或者其他绑定方法的写法
<a href="javascript:;" onclick="jsFunction('param')">借助onclick</a>

看起来好像没什么问题，两种方法都行得通，但是如果param参数是个url，并且url是后端程序urlencode处理过的，会发生什么情况呢？我们来实验一下

#search原文是“测+试 一下”，中间有空格
<a href="javascript:jsFunction('http://www.example.com?search=%E6%B5%8B%2B%E8%AF%95+%E4%B8%80%E4%B8%8B');">借助href属性</a>
<a href="javascript:;" onclick="jsFunction('http://www.example.com?search=%E6%B5%8B%2B%E8%AF%95+%E4%B8%80%E4%B8%8B')">借助onclick</a>
function jsFunction(url){
    console.log(url);
    location.href = url;
}

实验发现，借助href属性时，js函数中打印出来的字符是被decode解码了的，而且%2B变成+,+还是+，而借助onclick方法则不会。

结论：尽量少用，最好不用href属性调用js方法，最好用onclick或者其他绑定点击事件的写法。