The story background
Early in the morning at work, happily typing code ING, suddenly the BOSS came.
BOSS says: Xiao Chen, how many hands live? Now there is an urgent function that needs to be launched. Can you still do it? ME: Tender, absolutely tender! BOSS: Ok, here’s how it works, blah blah blah… BOSS continues: How much work do you think? Is 10 days enough? ME: Enough, enough, absolutely enough! BOSS says: Ok, so do it in a week and test it in a week. ME: HMM…
So began to talk chi chi knock code, function is developed on the basis of the enterprise wechat, debugging needs to use wechat developer tools in the public number web page.
On Friday, I finished the testing and released it to the test environment. I used the enterprise wechat PC to test it. It was very nice and there was no problem.
Use enterprise wechat mobile terminal test, click the drop-down box is not open? !!!!! Can’t select options after I hit open? !!!!!
Problem solving process
As the saying goes, there are two ways to solve a problem:
- To solve the problem
- Deal with the person who asked the question
So…
Deal with the person who asked the question
If bootstrap-select is used and Chosen is replaced, wechat developer tool debugging is still ok, release to the test environment, enterprise wechat PC debugging, no problem, mobile debugging, still not ok? !!!!! Continue to…
Kill feature…
On the Select 2…
Wechat developer tools debugging…
Publish to test environment…
Enterprise wechat PC debugging…
Mobile debugging…
. Round and round…
Obviously not possible, it’s only three things, it’s the third plugin, still not working, then definitely need to change the plugin.
To solve the problem
Since the person who posed the problem couldn’t solve it, it had to be solved.
Note That the select2-min.js binding is a click Event on the Listeners of Elements on the Console. Note that the select2-min.js binding is a click Event on the Listeners.
What the hell is going on??
In a rage, click on all events to see which events are bound to select2-min.js. After a long search, it turns out that the selection box is bound to a MouseDown event.
Select2-min. js is bound to a number of events, so why mousedown? First, the blur event (not in the screenshot) is obviously caused by the mouse moving up to change the style. Second, the focus event is usually triggered after the active call to the focus method. The keydown event is triggered by the key. There are still mousedown events left, so how to determine?? Simple! Just click the Remove button after the corresponding event, Remove the event, and then click the selection box to see if it still drops down.
After removing the bound mousedown event, sure enough, clicking on the selection box no longer appears as a dropdown.
Change the corresponding mousedown event in select2-min.js to the click event.
Release to the test environment, the mobile terminal can also click the selection box to appear the drop-down effect, but found that the option still cannot be selected, then this must be a similar problem, continue to search, and finally found that it is a Mouseup event.
Change the corresponding mouseup event in select2-min.js to a click event.
It took 1 and a half hours to solve on Saturday morning. I’m so happy ~~~
conclusion
When writing plugins, they pursue the ultimate experience and use a fine-grained way to solve problems. Some problems may occur when using plugins, so they need to solve the problem by themselves. Then the specific steps to solve the problem are as follows:
- Understand the problem
- To analyze problems
- To solve the problem
- If you can’t solve a problem, try to solve it in another way
- Or, if not, humane destruction
