click事件不生效以及输入框不可输入事件不生效(datepicker日期插件对click事件的影响)

---

----导语：此篇文章主要通过$(selector).blur()和readonly来解决输入框失去焦点事件苹果手机不生效的问题，以及通过cursor属性+click()达到点击页面其他区域隐藏日期插件，和用$(‘selector’).datepicker()事件达到点击输入框弹出日期插件效果。

现象及经过：
如图：实现点击输入框弹出一个日期选择插件的功能，最初直接在input框上绑定一个click()点击事件，然而！！
1.点击输入框第一下竟然完全没有动静！！再点下才弹出来。
2.点击插件的下一个月按钮，竟然弹出手机软件盘！！！（限苹果手机）
3.点击插件之外的地方插件不可隐藏（限苹果手机）。

改动前代码：

在安卓手机上运行起来完全没有问题，但是在苹果手机上就不行了。虽然click事件会有300ms的延迟，但是不至于不能弹出日历。
既然被绑定的元素是一个输入框，此时就想到另外一个输入框专属事件focus()，把事件换成focus后就正常了。
但是再点击插件的下一月的按钮时输入框竟然可以重新获得焦点，并且弹出软键盘！！这是完全不能容忍的，于是乎，加上一个readonly属性，让此焦点彻底的消失！

改造后代码：


改造后的代码在点击弹出插件和点击其他地方插件隐藏没有问题，但是在调用日期插件后，函数被执行了2遍。
查找此元素有没有被绑定其他事件，然而并没有。那只有一种可能性----这个点击事件被触发了2次，所以才会被执行了2遍。
翻阅datepicker插件的官网（http://api.jqueryui.com/datepicker/） 配置文档的showOn参数，才发现出发此插件的方法只有’focus’,'button’这两种事件。而且$(‘selector’).datepicker()此写法已经触发focus事件调用了日期插件，所以就无需再绑定click或者focus事件，否则就会触发2次。
改造前代码：

改造后代码：

解决方案及原因：
1.将focus事件去掉，直接用${(}^{\prime }selecto{r}^{\prime }).datepicker()方法$(‘selector’).datepicker()此方法默认‘focus事件触发，无需绑定其他点击获取焦点事件。
2.给元素加上readonly属性
此属性会让元素彻底失去焦点从而无法弹出手机软件盘。
只用blur()事件苹果手机会出现一些兼容性问题。(软键盘并未完全关闭)
3.给body加上cursor:pointer属性，让整个页面都处于可点击状态
苹果有这么个设置----对于点击的对象，必须拥有cursor:pointer这个样式的 设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件。

 *问题**
 虽然调用函数2次的问题已经解决，但是原来在绑定事件内的业务处理逻辑此时放在哪里进行处理？请参阅下一篇（https://mp.youkuaiyun.com/mdeditor/85249528#）